content: import React from 'react';
  import ReactDOM from 'react-dom';
  
  import JqxRangeSelector from '../../../jqwidgets-react/react_jqxrangeselector.js';
  import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';
  
  class App extends React.Component {
      componentDidMount() {
          this.refs.setSelection.on('click', () => {
              this.refs.myRangeSelector.setRange(30, 70);
          });
          this.refs.getSelection.on('click', () => {
              let range = this.refs.myRangeSelector.getRange();
              alert('The selected range is from ' + range.from + ' to ' + range.to);
          });
      }
      render () {
          return (
              <div>
                  <JqxRangeSelector ref='myRangeSelector'
                      width={'80%'} height={100}
                      min={0}
                      max={100}
                      range={{ from: 10, to: 50 }}
                      majorTicksInterval={10}
                      minorTicksInterval={1}
                  />
                  <div style={{ marginLeft: 30, marginTop: 50 }}>
                      <JqxButton ref='setSelection' value='Set range' style={{ float: 'left', marginRight: 10}}
                        width={100} height={25}
                      />
                      <JqxButton ref='getSelection' value='Get range'
                        width={100} height={25}
                      />
                  </div>
              </div>
          )
      }
  }
  
  ReactDOM.render(<App />, document.getElementById('app'));
  