Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showGroupLabels property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} showGroupLabels={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labelsOnTicks property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} labelsOnTicks={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the markersFormatFunction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} markersFormatFunction={markersFormatFunction}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labelsFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} labelsFormat={'p'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labelsFormatFunction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} labelsFormatFunction={labelsFormatFunction}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labelPrecision property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} labelPrecision={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the moveOnClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} moveOnClick={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the markerRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} markerRenderer={markerRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the markerPrecision property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} markerPrecision={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the majorLabelRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} majorLabelRenderer={majorLabelRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the markersFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} markersFormat={'p'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the majorTicksInterval property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minorTicksInterval property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the padding property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} padding={padding}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the range property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the resizable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} resizable={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showMinorTicks property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} showMinorTicks={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the snapToTicks property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} snapToTicks={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showMajorLabels property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} showMajorLabels={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showMarkers property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} showMarkers={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the slected range is changed.

Code examples

Bind to the change event of jqxRangeSelector.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRangeSelector.on('change', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRangeSelector.destroy();
    }

    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myRangeSelector.getRange();
    }

    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRangeSelector.render();
    }

    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRangeSelector.refresh();
    }

    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRangeSelector from 'jqwidgets-react/react_jqxrangeselector.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRangeSelector.setRange(20,20);
    }

    render() {       
        
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750} height={100} min={0} max={200} range={{ from: 10, to: 50 }} 
                majorTicksInterval={10} minorTicksInterval={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));