Ticks in React Range slider component

30 Jan 20239 minutes to read

The Ticks in Slider supports you to easily identify the current value/values of the Slider. It contains smallStep and largeStep. The value of the major ticks alone will be displayed in the slider. In order to enable/disable the small ticks, use the showSmallTicks property.

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let tooltip = { placement: "Before", isVisible: true, showOn: "Always" };
    let value = 30;
    // Slider ticks customization
    let ticks = {
        placement: "After",
        largeStep: 20,
        smallStep: 10,
        showSmallTicks: true
    };
    return (<div id="container">
      <div className="wrap">
        <SliderComponent id="slider" value={value} tooltip={tooltip} ticks={ticks}/>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let tooltip: TooltipDataModel = { placement: "Before", isVisible: true, showOn: "Always" };
  let value = 30;
  // Slider ticks customization
  let ticks: TicksDataModel = {
    placement: "After",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };

  return (
    <div id="container">
      <div className="wrap">
        <SliderComponent id="slider" value={value} tooltip={tooltip} ticks={ticks} />
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Step

When the Slider is moved, it increases/decreases the value based on the step value. By default, the value is increased/decreased by 1. Use the step property to change the increment step value.

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let ticks = {
        placement: "After",
        largeStep: 20,
        smallStep: 10,
        showSmallTicks: true
    };
    let tooltip = { placement: "Before", isVisible: true, showOn: "Always" };
    let value = 30;
    // Enables step
    let step = 10;
    return (<div id="container">
      <div className="wrap">
        <SliderComponent id="slider" value={value} step={step} tooltip={tooltip} ticks={ticks}/>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let ticks: TicksDataModel = {
    placement: "After",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  let tooltip: TooltipDataModel = { placement: "Before", isVisible: true, showOn: "Always" };
  let value = 30;
  // Enables step
  let step = 10;

  return (
    <div id="container">
      <div className="wrap">
        <SliderComponent
          id="slider"
          value={value}
          step={step}
          tooltip={tooltip}
          ticks={ticks}
        />
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Min and Max

Enables the minimum/starting and maximum/ending value of the Slider, by using the min and max property. By default, the minimum value is 1 and maximum value is 100. In the following sample the slider is rendered with the min value as 100 and max value as 1000.

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let ticks = {
        placement: "After",
        largeStep: 200,
        smallStep: 100,
        showSmallTicks: true
    };
    let tooltip = { placement: "Before", isVisible: true, showOn: "Always" };
    // Minimum value
    let min = 100;
    // Maximum value
    let max = 1100;
    // Slider current value
    let value = 400;
    return (<div id="container">
      <div className="wrap">
        <SliderComponent id="slider" min={min} max={max} value={value} tooltip={tooltip} ticks={ticks}/>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let ticks: TicksDataModel = {
    placement: "After",
    largeStep: 200,
    smallStep: 100,
    showSmallTicks: true
  };
  let tooltip: TooltipDataModel = { placement: "Before", isVisible: true, showOn: "Always" };
  // Minimum value
  let min = 100;
  // Maximum value
  let max = 1100;
  // Slider current value
  let value = 400;

  return (
    <div id="container">
      <div className="wrap">
        <SliderComponent
          id="slider"
          min={min}
          max={max}
          value={value}
          tooltip={tooltip}
          ticks={ticks}
        />
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));