React UI Components Documentation

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the largestep property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} largestep={100}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the step property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} step={20}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showButtons property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} showButtons={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the thumbMinSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} thumbMinSize={5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the vertical property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} vertical={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000} value={20}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxScrollBar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScrollBar.on('valueChanged', (event) => {
            // Do Something...
        });
    }

    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScrollBar.isScrolling();
    }

    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollBar from 'jqwidgets-react/react_jqxscrollbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScrollBar.setPosition(10);
    }

    render() {            
        return (
            <JqxScrollBar ref='myScrollBar'
                width={18} height={280} min={0} max={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));