Sets or gets scroll buttons position.

'both'

'left'

'right'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} buttonsPosition={'left'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the slider is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the slider's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the slider's layout.

'normal'

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} layout={'reverse'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's mode.

'default'- the slider's thumb can be dragged smoothly ( like a scrollbar )

'fixed'- the thumb is dragged with a 'step' specified by the 'step' property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} mode={'fixed'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's minor ticks frequency.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} showMinorTicks={true} minorTicksFrequency={1}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's minor ticks size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} showMinorTicks={true} minorTicksFrequency={1} minorTickSize={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's maximum value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} max={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's minimum value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} min={5}
      />
    );
  }
}
 
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 JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} orientation={'vertical'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the slider is displayed as a range slider and has 2 thumbs. This allows the user to select a range of values. By default, end-users can select only a single value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} rangeSlider={true}
      />
    );
  }
}
 
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 JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the slider's step when the user is using the keyboard arrows, slider increment and decrement buttons or the mouse wheel for changing the slider's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} step={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether ticks will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} showTicks={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether minor ticks will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} showMinorTicks={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether major tick labels will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} showTickLabels={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the scroll buttons will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} showButtons={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the slider range background is displayed. This is the fill between the slider's left button and the slider's thumb to indicate the selected value. In range slider mode, the space between the handles is filled to indicate the selected values.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} showRange={false}
      />
    );
  }
}
 
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 JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} 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 JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's ticks position.

'top'

'bottom'

'both'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} ticksPosition={'bottom'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's major ticks frequency.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} ticksFrequency={1}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's major ticks size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} tickSize={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the major ticks labels formatting function.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      tickLabelFormatFunction: (value: number): any => {
        return value;
      }
    }
  }  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} tickLabelFormatFunction={this.state.tickLabelFormatFunction}
        showTickLabels={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the slider tooltip will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} tooltip={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tooltip's hide delay.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} tooltip={true} tooltipHideDelay={2000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tooltip's position. Possible values: "near", "far"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} tooltip={true} tooltipPosition={'far'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tooltip's tooltip formatting.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      tooltipFormatFunction: (value: number): any => {
        return value.toPrecision(2);
      }
    }
  }  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} tooltipFormatFunction={this.state.tooltipFormatFunction}
        tooltip={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets slider's value. This poperty will be an object with the following structure { rangeStart: range_start, rangeEnd: range_end } if the slider is range slider otherwise it's going to be a number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} value={5}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets range slider's values.The 'rangeSlider' property should be set to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} rangeSlider={true} values={[5,15]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the slider's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100} width={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the change event of jqxSlider.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} onChange={this.onChange} 
        height={100}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the slide event of jqxSlider.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} onSlide={this.onSlide} 
        height={100}
      />
    );
  }
 
  private onSlide(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the slideStart event of jqxSlider.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} onSlideStart={this.onSlideStart} 
        height={100}
      />
    );
  }
 
  private onSlideStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();  
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} onSlideEnd={this.onSlideEnd} 
        height={100}
      />
    );
  }
 
  private onSlideEnd(e: Event): void {
    alert('do something...');
  }
}
 
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 JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Decreases the jqxSlider's value with the value of the 'step' property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.decrementValue();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disabling the slider.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables the slider.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.enable();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the slider's value. The returned value is a number or an object. If the Slider is a range slider, the method returns an object with the following fields: rangeStart - the range's start value and rangeEnd - the range's end value..

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.getValue();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Increases the jqxSlider's value with the value of the 'step' property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.incrementValue();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the jqxSlider's value. When the slider is not in range slider mode, the required parameter for the value is a number which should be in the 'min' - 'max' range. Possible value types in range slider mode- array, object or two numbers.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.setValue(5);
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
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 JqxSlider, { ISliderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxslider';
 
class App extends React.PureComponent<{}, ISliderProps> {
  private mySlider = React.createRef<JqxSlider>();
 
  public componentDidMount(): void {
    this.mySlider.current!.val();
  }
   
  
  public render() {
    return (
      <JqxSlider ref={this.mySlider} 
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);