React UI Components Documentation

Determines the duration of the progressbar's animation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} animationDuration={1000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines different color segments.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        colorRanges: [
          { stop: 20, color: "red" },
          { stop: 70, color: "blue" }
        ]
    }
  }  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} colorRanges={this.state.colorRanges}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the progress bar is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the progress bar's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} height={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxProgressBar's layout.

'normal'

'reverse'-the slider is filled from right-to-left(horizontal progressbar) and from top-to-bottom(vertical progressbar)

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} layout={'reverse'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the progress bar's max value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} max={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the progress bar's min value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} min={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the orientation.

'vertical'

'horizontal'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={40} value={50} showText={true} height={500} orientation={'vertical'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      renderText: (text: string, value: number): any => {
        return "<span style='background: #ffe8a6; color: #e53d37; font-style: italic;'>" + text + "</span>";
      }
    }
  }  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} renderText={this.state.renderText}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} template={'success'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the progress bar's value The value should be set between min(default value: 0) and max(default value: 100).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the progress bar's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();  
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the complete event of jqxProgressBar.

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.

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxProgressBar.

Sets the progress bar's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();
 
  public componentDidMount(): void {
    this.myProgressBar.current!.actualValue(20);
  }
   
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();
 
  public componentDidMount(): void {
    this.myProgressBar.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, { IProgressBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
 
class App extends React.PureComponent<{}, IProgressBarProps> {
  private myProgressBar = React.createRef<JqxProgressBar>();
 
  public componentDidMount(): void {
    this.myProgressBar.current!.val();
  }
   
  
  public render() {
    return (
      <JqxProgressBar ref={this.myProgressBar} 
        width={500} value={50} showText={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);