Sets or gets the animationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} animationDuration={1000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the colorRanges property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} colorRanges={colorRanges}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the layout property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} layout={'reverse'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} max={250}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} min={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the orientation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} orientation={'vertical'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderText property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} renderText={renderText}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showText property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} theme={'danger'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50} theme={'arctic'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is equal to the max. value.

Code examples

Bind to the complete event of jqxProgressBar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myProgressBar.on('complete', (event) => {
            // Do Something...
        });
    }

    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user enters an invalid value( value which is not Number or is out of the min - max range. )

Code examples

Bind to the invalidvalue event of jqxProgressBar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myProgressBar.on('invalidvalue', (event) => {
            // Do Something...
        });
    }

    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxProgressBar.

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

    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxProgressbar from 'jqwidgets-react/react_jqxprogressbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myProgressBar.actualValue(20,20);
    }

    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        return (
            <JqxProggressbar ref='myProgressbar'
                width={250} height={3} value={0} showText={true} value={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));