React UI Components Documentation

Sets or gets whether the range selector is disabled.

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

A custom callback function for rendering the major labels. Has two arguments - the value of the major label and the date object.

Note: major labels are applied only if the data type is date.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      groupLabelsFormatFunction: (value: string, date: object): any => {
        return "<span style='font-style: italic;'>" + value + "<span>";
      }
    }
  }  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        showGroupLabels={true} min={'June 15, 2013'} max={'August 21, 2013'} labelsFormat={'dd'}
        markersFormat={'d'} minorTicksInterval={'day'} majorTicksInterval={'week'}
        groupLabelsFormatFunction={this.state.groupLabelsFormatFunction}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the range selector's height.
Possible values:

• "Npx", where N is a number;
• numeric value in pixels.

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

Sets or gets the format of the labels.
Possible number formats:

• 'd' - decimal numbers;
• 'f'- floating-point numbers;
• 'n' - integer numbers;
• 'c' - currency numbers;
• 'p' - percentage numbers.

Possible date formats:

Note: When the data type is date, the labelsFormat property must always be set.

• 'd' - the day of the month;
• 'dd' - the day of the month;
• 'ddd' - the abbreviated name of the day of the week;
• 'dddd' - the full name of the day of the week;
• 'h' - the hour, using a 12-hour clock from 1 to 12;
• 'hh' - the hour, using a 12-hour clock from 01 to 12;
• 'H' - the hour, using a 24-hour clock from 0 to 23;
• 'HH' - the hour, using a 24-hour clock from 00 to 23;
• 'm' - the minute, from 0 through 59;
• 'mm' - the minutes,from 00 though 59;
• 'M' - the month, from 1 through 12;
• 'MM' - the month, from 01 through 12;
• 'MMM' - the abbreviated name of the month;
• 'MMMM' - the full name of the month;
• 's' - the second, from 0 through 59;
• 'ss' - the second, from 00 through 59;
• 't' - the first character of the AM/PM designator;
• 'tt' - the AM/PM designator;
• 'y' - the year, from 0 to 99;
• 'yy' - the year, from 00 to 99;
• 'yyy' - the year, with a minimum of three digits;
• 'yyyy' - the year as a four-digit number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        labelsFormat={'p'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

A custom callback function for rendering the labels. Has one argument - the value of the label.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      labelsFormatFunction: (value: string): any => {
        return "<span style='color: red;'>" + value + "<span>";
      }
    }
  }  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        labelsFormatFunction={this.state.labelsFormatFunction}
      />
    );
  }
}
 
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 JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        labelsOnTicks={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the format of the markers.
Possible number formats:

• 'd' - decimal numbers;
• 'f'- floating-point numbers;
• 'n' - integer numbers;
• 'c' - currency numbers;
• 'p' - percentage numbers.

Possible date formats:

Note: When the data type is date, the markersFormat property must always be set.

• 'd' - the day of the month;
• 'dd' - the day of the month;
• 'ddd' - the abbreviated name of the day of the week;
• 'dddd' - the full name of the day of the week;
• 'h' - the hour, using a 12-hour clock from 1 to 12;
• 'hh' - the hour, using a 12-hour clock from 01 to 12;
• 'H' - the hour, using a 24-hour clock from 0 to 23;
• 'HH' - the hour, using a 24-hour clock from 00 to 23;
• 'm' - the minute, from 0 through 59;
• 'mm' - the minutes,from 00 though 59;
• 'M' - the month, from 1 through 12;
• 'MM' - the month, from 01 through 12;
• 'MMM' - the abbreviated name of the month;
• 'MMMM' - the full name of the month;
• 's' - the second, from 0 through 59;
• 'ss' - the second, from 00 through 59;
• 't' - the first character of the AM/PM designator;
• 'tt' - the AM/PM designator;
• 'y' - the year, from 0 to 99;
• 'yy' - the year, from 00 to 99;
• 'yyy' - the year, with a minimum of three digits;
• 'yyyy' - the year as a four-digit number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        markersFormat={'p'}
      />
    );
  }
}
 
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 JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      markersFormatFunction: (value: string, position: string): any => {
        return "<span style='color: red;'>" + value + "<span>";
      }
    }
  }  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        markersFormatFunction={this.state.markersFormatFunction}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the interval between major ticks.
Possible values:

• number;
• object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks, months, years };
• one of the following strings: "millisecond", "second", "minute", "hour", "day", "week", "month", "year".

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

Sets or gets the interval between minor ticks.
Possible values:

• number;
• object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks, months, years };
• one of the following strings: "millisecond", "second", "minute", "hour", "day", "week", "month", "year".

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

Sets or gets the maximum value of the range selector scale.
Possible values:

• number;
• date object;
• date string.

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

Sets or gets the minimum value of the range selector scale.
Possible values:

• number;
• date object;
• date string.

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

Sets or gets whether the position of the slider can be changed by clicking on the range selector.

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

Sets or gets the range selector's padding.
Possible values:

• "auto";
• "Npx", where N is a number;
• numeric value in pixels.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        padding: '40px 40px 0px 40px'
    }
  }  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        padding={this.state.padding}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

An object containing the following properties:

• from - the start of the initially selected range.
  Possible values: number, date object, date string;
• to - the end of the initially selected range;
  Possible values: number, date object, date string;
• min - the minimum value of the selection.
  Possible values: number, object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks } or one of the following strings: "millisecond", "second", "minute", "hour", "day", "week"
• max - the maximum value of the selection.
  Possible values: number, object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks } or one of the following strings: "millisecond", "second", "minute", "hour", "day", "week"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        range={{ from: 10, to: 50 }}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the range selector's slider can be resized.

Note: If resizable is set to false, the slider can only be resized programmatically with the method setValue.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        range={{ from: 10, to: 50 }} resizable={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the jqxRangeSelector's right-to-left support is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        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 JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        showGroupLabels={true} min={'June 15, 2013'} max={'August 21, 2013'} labelsFormat={'dd'}
        markersFormat={'d'} minorTicksInterval={'day'} majorTicksInterval={'week'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether minor ticks will be displayed.

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

Sets or gets whether the slider will snap to the major and minor ticks.

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

Sets or gets whether the major labels will be shown.

Note: major labels are applied only if the data type is date.

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

Sets or gets whether the markers 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 JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        showMarkers={false}
      />
    );
  }
}
 
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 JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();  
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
        theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the range selector's width.
Possible values:

• "Npx", where N is a number;
• numeric value in pixels.

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

This event is triggered when the slected range is changed.

Code examples

Bind to the change event of jqxRangeSelector.

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

Removes the range selector from the DOM.

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

Gets the selected range. Returns an object with two fields.

Range object fields:

• from - the start of the selection - number or date object;
• to - the end of the selection - number or date object.

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

Renders the range selector.

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

Refreshes the range selector.

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

Sets the selected range.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRangeSelector, { IRangeSelectorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrangeselector';
 
class App extends React.PureComponent<{}, IRangeSelectorProps> {
  private myRangeSelector = React.createRef<JqxRangeSelector>();
 
  public componentDidMount(): void {
    this.myRangeSelector.current!.setRange(20,80);
  }
   
  
  public render() {
    return (
      <JqxRangeSelector ref={this.myRangeSelector} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);