React UI Components Documentation

Sets or gets the buttonsPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} buttonsPosition={'left'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the layout property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} layout={'reverse'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the mode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} mode={'fixed'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minorTicksFrequency property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} minorTicksFrequency={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minorTickSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} minorTickSize={4}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the orientation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} orientation={'vertical'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rangeSlider property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} rangeSlider={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the step property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showTicks property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} showTicks={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showMinorTicks property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} showMinorTicks={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showTickLabels property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} showTickLabels={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showButtons property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} showButtons={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showRange property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} showRange={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} template={'success'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ticksPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} ticksPosition={'bottom'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ticksFrequency property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} ticksFrequency={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tickSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} tickSize={7}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tickLabelFormatFunction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} tickLabelFormatFunction={tickLabelFormatFunction}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tooltip property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} tooltip={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tooltipHideDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} tooltipHideDelay={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tooltipPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} tooltipPosition={'far'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tooltipFormatFunction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} tooltipFormatFunction={tooltipFormatFunction}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} value={5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the values property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} values={[5,15]}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5} width={300}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value of the slider is changed.

Code examples

Bind to the change event of jqxSlider.

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

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the jqxSlider is created.

Code examples

Bind to the created event of jqxSlider.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.on('created', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user is dragging the sliders thumb.

Code examples

Bind to the slide event of jqxSlider.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.on('slide', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user start dragging slider's thumb.

Code examples

Bind to the slideStart event of jqxSlider.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.on('slideStart', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user have dragged the slider's thumb and drop it.

Code examples

Bind to the slideEnd event of jqxSlider.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.on('slideEnd', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.decrementValue();
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.disable();
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.enable();
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.focus();
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.mySlider.getValue();
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.incrementValue();
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySlider.setValue(10);
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSlider from 'jqwidgets-react/react_jqxslider.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.mySlider.val();
    }

    render() {               
        return (
            <JqxSlider ref='mySlider'
                height={60} min={0} max={255} step={25.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));