React

Search results

How To

02 Feb 2023 / 15 minutes to read

Value formatting using slider

Date Format

The Date formatting can be achieved in ticks and tooltip using renderingTicks and tooltipChange events respectively. The process of formatting is explained in the below sample.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let defaultObj;
    let min = new Date("2013-06-13").getTime();
    let max = new Date("2013-06-21").getTime();
    let step = 86400000;
    let value = new Date("2013-06-15").getTime();
    // Slider ticks customization
    let ticks = { placement: 'After', largeStep: 2 * 86400000 };
    let tooltip = { placement: 'Before', isVisible: true };
    function renderingTicksHandler(args) {
        let totalMiliSeconds = Number(args.value);
        // Converting the current milliseconds to the respective date in desired format
        let custom = { year: "numeric", month: "short", day: "numeric" };
        args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
    }
    function tooltipChangeHandler(args) {
        let totalMiliSeconds = Number(args.text);
        // Converting the current milliseconds to the respective date in desired format
        let custom = { year: "numeric", month: "short", day: "numeric" };
        args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
    }
    return (<div id='container'>
        <div className='wrap'>
          <SliderComponent id='slider' min={min} max={max} value={value} step={step} tooltip={tooltip} ticks={ticks} showButtons={true} ref={(slider) => { defaultObj = slider; }} tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)}/>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.sliderwrap {
  margin-top: 20px;
}

.sliderwrap label {
  font-size: 13px;
  font-weight: 100;
  margin-top: 15px;
  padding-bottom: 15px;
}

.wrap {
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}

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

function App() {

  let defaultObj: SliderComponent;

  let min = new Date("2013-06-13").getTime();
  let max = new Date("2013-06-21").getTime();
  let step = 86400000;
  let value = new Date("2013-06-15").getTime();

  // Slider ticks customization
  let ticks= { placement: 'After', largeStep: 2 * 86400000 };
  let tooltip= { placement: 'Before', isVisible: true };

  function renderingTicksHandler (args: SliderTickEventArgs) {
    let totalMiliSeconds = Number(args.value);
    // Converting the current milliseconds to the respective date in desired format
    let custom = { year: "numeric", month: "short", day: "numeric" };
    args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
  }

  function tooltipChangeHandler(args: SliderTooltipEventArgs) {
    let totalMiliSeconds = Number(args.text);
      // Converting the current milliseconds to the respective date in desired format
      let custom = { year: "numeric", month: "short", day: "numeric" };
      args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
  }

  return (
      <div id='container'>
        <div className='wrap'>
          <SliderComponent id='slider' min={min} max={max} value={value} step={step}
          tooltip={tooltip} ticks={ticks} showButtons={true} ref={(slider) => { defaultObj = slider }}
          tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)} />
        </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Time Format

The time formatting can be achieved same as the date formatting using renderingTicks and change events. The process of time formatting is explained in the below sample.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let defaultObj;
    let min = new Date(2013, 6, 13, 11).getTime();
    let max = new Date(2013, 6, 13, 17).getTime();
    let value = new Date(2013, 6, 13, 13).getTime();
    let step = 3600000;
    // Slider ticks customization
    let ticks = { placement: 'After', largeStep: 2 * 3600000 };
    let tooltip = { placement: 'Before', isVisible: true };
    function renderingTicksHandler(args) {
        let totalMiliSeconds = Number(args.value);
        let custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
    }
    function tooltipChangeHandler(args) {
        let totalMiliSeconds = Number(args.text);
        let custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
    }
    return (<div id='container'>
        <div className='wrap'>
          <SliderComponent id='slider' min={min} max={max} value={value} step={step} tooltip={tooltip} ticks={ticks} showButtons={true} ref={(slider) => { defaultObj = slider; }} tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)}/>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.sliderwrap {
  margin-top: 20px;
}

.sliderwrap label {
  font-size: 13px;
  font-weight: 100;
  margin-top: 15px;
  padding-bottom: 15px;
}

.wrap {
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}

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

function App() {

  let defaultObj: SliderComponent;

  let min = new Date(2013, 6, 13, 11).getTime();
  let max = new Date(2013, 6, 13, 17).getTime();
  let value = new Date(2013, 6, 13, 13).getTime();
  let step = 3600000;

  // Slider ticks customization
  let ticks= { placement: 'After', largeStep: 2 * 3600000 };
  let tooltip= { placement: 'Before', isVisible: true };

  function renderingTicksHandler (args: SliderTickEventArgs) {
    let totalMiliSeconds = Number(args.value);
    let custom = { hour: '2-digit', minute: '2-digit' };
    args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
  }

  function tooltipChangeHandler(args: SliderTooltipEventArgs) {
    let totalMiliSeconds = Number(args.text);
    let custom = { hour: '2-digit', minute: '2-digit' };
    args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
  }

  return (
      <div id='container'>
        <div className='wrap'>
          <SliderComponent id='slider' min={min} max={max} value={value} step={step} tooltip={tooltip}
          ticks={ticks} showButtons={true} ref={(slider) => { defaultObj = slider }}
          tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)} />
        </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Numeric Value Customization

The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let defaultObj;
    // Slider ticks customization
    let ticks01 = { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true };
    let tooltip01 = { isVisible: true, format: '##.## Km' };
    let ticks02 = { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true };
    let tooltip02 = { isVisible: true, format: '##.#00' };
    let tooltip03 = { isVisible: true, format: '00##' };
    let ticks03 = { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true };
    return (<div id='container'>

      <div className='wrap'>
          <div className='label'>Slider formatted with unit representation</div>
          <SliderComponent id='slider' min={0} max={100} value={30} step={1} tooltip={tooltip01} ticks={ticks01}/>
      </div>

      <div className='wrap'>
          <div className='label'>Slider formatted with three decimal specifiers</div>
          <SliderComponent id='slider1' min={0.1} max={0.2} value={0.13} step={0.01} tooltip={tooltip02} ticks={ticks02}/>
      </div>

      <div className='wrap'>
          <div className='label'>Slider formatted with two leading zeros</div>
          <SliderComponent id='slider2' min={0} max={100} value={30} step={1} tooltip={tooltip03} ticks={ticks03}/>
      </div>
  </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.sliderwrap {
  margin-top: 20px;
}

.sliderwrap label {
  font-size: 13px;
  font-weight: 100;
  margin-top: 15px;
  padding-bottom: 15px;
}

.wrap {
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}

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

function App() {

  let defaultObj: SliderComponent;

  // Slider ticks customization
  let ticks01 = { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true };
  let tooltip01 = { isVisible: true, format: '##.## Km' };

  let ticks02 = { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true };
  let tooltip02 = { isVisible: true, format: '##.#00' };

  let tooltip03 = { isVisible: true, format: '00##' };
  let ticks03 = { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true };

  return (
    <div id='container'>

      <div className='wrap'>
          <div className='label'>Slider formatted with unit representation</div>
          <SliderComponent id='slider' min={0} max={100} value={30} step={1} tooltip={tooltip01} ticks={ticks01} />
      </div>

      <div className='wrap'>
          <div className='label'>Slider formatted with three decimal specifiers</div>
          <SliderComponent id='slider1' min={0.1} max={0.2} value={0.13} step={0.01} tooltip={tooltip02} ticks={ticks02} />
      </div>

      <div className='wrap'>
          <div className='label'>Slider formatted with two leading zeros</div>
          <SliderComponent id='slider2' min={0} max={100} value={30} step={1} tooltip={tooltip03} ticks={ticks03} />
      </div>
  </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Customize the bar

Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the slider bar. The slider bar can be customized with different themes. By default, slider have class name e-slider-track for bar. The class can be overridden with our own color values like the following code snippet.

.e-control.e-slider .e-slider-track .e-range {
  background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}

function change(args: SliderChangeEventArgs) {
  if (args.value > 0 && args.value <= 25) {
      // Change handle and range bar color to green when
      (sliderHandle as HTMLElement).style.backgroundColor = 'green';
      (sliderTrack as HTMLElement).style.backgroundColor = 'green';
  } else if (args.value > 25 && args.value <= 50) {
      // Change handle and range bar color to royal blue
      (sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
      (sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
  } else if (args.value > 50 && args.value <= 75) {
      // Change handle and range bar color to dark orange
      (sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
      (sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
  } else if (args.value > 75 && args.value <= 100) {
      // Change handle and range bar color to red
      (sliderHandle as HTMLElement).style.backgroundColor = 'red';
      (sliderTrack as HTMLElement).style.backgroundColor = 'red';
  }
}

You can also apply background color for a certain range depending upon slider values, using change event.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let defaultObj;
    let sliderTrack;
    let sliderHandle;
    function changeEvent(args) {
        if (args.value > 0 && args.value <= 25) {
            // Change handle and range bar color to green when
            sliderHandle.style.backgroundColor = 'green';
            sliderTrack.style.backgroundColor = 'green';
        }
        else if (args.value > 25 && args.value <= 50) {
            // Change handle and range bar color to royal blue
            sliderHandle.style.backgroundColor = 'royalblue';
            sliderTrack.style.backgroundColor = 'royalblue';
        }
        else if (args.value > 50 && args.value <= 75) {
            // Change handle and range bar color to dark orange
            sliderHandle.style.backgroundColor = 'darkorange';
            sliderTrack.style.backgroundColor = 'darkorange';
        }
        else if (args.value > 75 && args.value <= 100) {
            // Change handle and range bar color to red
            sliderHandle.style.backgroundColor = 'red';
            sliderTrack.style.backgroundColor = 'red';
        }
    }
    function created() {
        sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');
        sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');
        sliderHandle.style.backgroundColor = 'green';
        sliderTrack.style.backgroundColor = 'green';
    }
    return (<div id='container'>
      <div className="col-lg-12 control-section">
        <div className="slider-content-wrapper">
            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">Height</div>
              <SliderComponent id='height_slider' min={0} max={100} value={30}/>
            </div>

            <div className="slider_container">
                <div className="slider-labeltext slider_userselect">Gradient color</div>
                <SliderComponent id='gradient_slider' type='MinRange' min={0} max={100} value={30}/>
            </div>

            <div className="slider_container">
                <div className="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
                <SliderComponent id='dynamic_color_slider' ref={(slider) => { defaultObj = slider; }} type='MinRange' min={0} max={100} value={30} change={changeEvent.bind(this)} created={created.bind(this)}/>
            </div>
        </div>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.slider-content-wrapper {
  width: 40%;
  margin: 0 auto;
  min-width: 185px;
}

.slider-userselect {
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}

.slider-labeltext {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 10px;
}

#height_slider .e-handle, #gradient_slider .e-handle {
  height: 20px;
  width: 20px;
  margin-left: -10px;
  top: calc(50% - 10px);
}

.slider_container {
  margin-top: 40px;
}

#height_slider .e-tab-handle::after {
  background-color: #f9920b;
}

#height_slider .e-slider-track {
  height: 8px;
  top: calc(50% - 4px);
  border-radius: 0;
}



#gradient_slider .e-range {
  height: 6px;
  top: calc(50% - 3px);
  border-radius: 5px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
  background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
  background: -moz-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}


#gradient_slider .e-slider-track {
  height: 8px;
  top: calc(50% - 4px);
  border-radius: 5px;
}

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

function App() {

  let defaultObj: SliderComponent;
  let sliderTrack: HTMLElement;
  let sliderHandle: HTMLElement;

  function changeEvent (args: SliderChangeEventArgs): void {
    if (args.value > 0 && args.value <= 25) {
        // Change handle and range bar color to green when
        (sliderHandle as HTMLElement).style.backgroundColor = 'green';
        (sliderTrack as HTMLElement).style.backgroundColor = 'green';
    } else if (args.value > 25 && args.value <= 50) {
        // Change handle and range bar color to royal blue
        (sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
        (sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
    } else if (args.value > 50 && args.value <= 75) {
        // Change handle and range bar color to dark orange
        (sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
        (sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
    } else if (args.value > 75 && args.value <= 100) {
        // Change handle and range bar color to red
        (sliderHandle as HTMLElement).style.backgroundColor = 'red';
        (sliderTrack as HTMLElement).style.backgroundColor = 'red';
    }
  }

  function created(): void {
    sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');
    sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');
    (sliderHandle as HTMLElement).style.backgroundColor = 'green';
    (sliderTrack as HTMLElement).style.backgroundColor = 'green';
  }

  return (
    <div id='container'>
      <div className="col-lg-12 control-section">
        <div className="slider-content-wrapper">
            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">Height</div>
              <SliderComponent id='height_slider' min={0} max={100} value={30} />
            </div>

            <div className="slider_container">
                <div className="slider-labeltext slider_userselect">Gradient color</div>
                <SliderComponent id='gradient_slider' type='MinRange' min={0} max={100} value={30} />
            </div>

            <div className="slider_container">
                <div className="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
                <SliderComponent id='dynamic_color_slider' ref={(slider) => { defaultObj = slider }}
              type='MinRange' min={0} max={100} value={30} change={changeEvent.bind(this)}
                created={created.bind(this)} />
            </div>
        </div>
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Customize the limits

Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized.

.e-slider-container.e-horizontal .e-limits {
  background-color: rgba(69, 100, 233, 0.46);
}

Here, the limit bar is customized with different background color. By default, the slider has class e-limits for limits bar. You can override the class with our own color values as given in the following code snippet.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let defaultObj;
    let value = [30, 70];
    let ticks = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
    // Initialize tooltip with placement and showOn
    let tooltip = { isVisible: true, placement: 'Before', showOn: 'Focus' };
    // Set the limit values for the minrange slider
    let minLimits = { enabled: true, minStart: 10, minEnd: 40 };
    // Set the limit values for the range slider
    let rangeLimits = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
    return (<div id='container'>
    <div className="content-wrapper">
      <div className='sliderwrap'>
          <label className="userselect">MinRange Slider With Limits</label>
          <SliderComponent id='minrange' type='MinRange' min={0} max={100} value={30} ticks={ticks} tooltip={tooltip} limits={minLimits}/>
      </div>

      <div className='sliderwrap'>
          <label className="userselect">Range Slider With Limits</label>
          <SliderComponent id='range' type='Range' min={0} max={100} value={value} ticks={ticks} tooltip={tooltip} limits={rangeLimits}/>
      </div>
    </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.content-wrapper {
  width: 52%;
  margin: 0 auto;
  min-width: 185px;
}

.sliderwrap {
  margin-top: 45px;
}

.e-bigger .content-wrapper {
  width: 80%;
}

.sliderwrap label {
  padding-bottom: 50px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 15px;
  display: block;
}

.userselect {
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}

.property-custom td {
  padding: 5px;
}

#range .e-limits, #minrange .e-limits {
  background-color: #ccc;
  background-color: rgba(69, 100, 233, 0.46);
}

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

function App() {

  let defaultObj: SliderComponent;
  let value: number[] = [30, 70];

  let ticks: object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
  // Initialize tooltip with placement and showOn
  let tooltip: object = { isVisible: true, placement: 'Before', showOn: 'Focus' };

  // Set the limit values for the minrange slider
  let minLimits: object = { enabled: true, minStart: 10, minEnd: 40 };
  // Set the limit values for the range slider
  let rangeLimits: object = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };

  return (
    <div id='container'>
    <div className="content-wrapper">
      <div className='sliderwrap'>
          <label className="userselect">MinRange Slider With Limits</label>
          <SliderComponent id='minrange'
            type='MinRange'
              min={0} max={100} value={30} ticks={ticks} tooltip={tooltip} limits={minLimits} />
      </div>

      <div className='sliderwrap'>
          <label className="userselect">Range Slider With Limits</label>
          <SliderComponent id='range' type='Range'
              min={0} max={100} value={value} ticks={ticks} tooltip={tooltip} limits={rangeLimits} />
      </div>
    </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Customize the ticks

Slider view can be customized via CSS. By overriding the slider CSS classes, you can customize the ticks. The ticks in slider allows you to easily identify the current value/values of the slider. It contains smallStep and largeStep. By default, slider has class e-tick for slider ticks. You can override the class as per your requirement. Refer to the following code snippet to render ticks.

.e-scale .e-tick.e-custom::before {
    content: '\e967';
    position: absolute;
}

#ticks_slider .e-scale :nth-child(1)::before {
    color: red;
}

Here, the color for rendered ticks has been applied through nth-child(child_number). The color is applied to the value of the child_number in the slider.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let defaultObj;
    let value = [30, 70];
    let icon = { placement: 'Before', largeStep: 20 };
    let custom = { placement: 'Both', largeStep: 20, smallStep: 5 };
    function iconTicks(args) {
        if (args.tickElement.classList.contains('e-large')) {
            args.tickElement.classList.add('e-custom');
        }
    }
    function customTicks(args) {
        let li = args.ticksWrapper.getElementsByClassName('e-large');
        let remarks = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
        for (let i = 0; i < li.length; ++i) {
            li[i].querySelectorAll('.e-tick-both')[1].innerText = remarks[i];
        }
    }
    return (<div id='container'>
      <div className="col-lg-12 control-section">
        <div className="slider-content-wrapper">
            <div className="slider_container" id="slider_wrapper">
              <div className="slider_labelText userselect">Dynamic ticks color</div>
              <SliderComponent id='ticks_slider' type='MinRange' min={0} max={100} step={5} value={30} ticks={icon} renderingTicks={iconTicks.bind(this)}/>
            </div>

            <div className="slider_container">
              <div className="slider_labelText userselect">Ticks with legends</div>
              <SliderComponent id='slider' type='MinRange' min={0} max={100} value={value} ticks={custom} renderedTicks={customTicks.bind(this)}/>
            </div>
          <div />
        </div>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.slider-content-wrapper {
  width: 40%;
  margin: 0 auto;
  min-width: 185px;
}

.userselect {
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}

.slider_labelText {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 40px;
}

.slider_container {
  margin-top: 40px;
}

.e-bigger .slider-content-wrapper {
  width: 80%;
}

#ticks_slider .e-range {
  z-index: unset;
}

@font-face {
  font-family: 'e-customized-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

#ticks_slider .e-scale .e-tick {
  background-image: none;
  visibility: visible;
  font-family: 'e-customized-icons';
}

#ticks_slider .e-scale {
  z-index: 0;
}

#ticks_slider .e-scale .e-custom::before {
  content: '\e967';
  position: absolute;
}

#ticks_slider .e-scale :nth-child(1)::before {
  color: red;
}

#ticks_slider .e-scale :nth-child(2)::before {
  color: blue;
}

#ticks_slider .e-scale :nth-child(3)::before {
  color: green;
}

#ticks_slider .e-scale :nth-child(4)::before {
  color: blueviolet;
}

#ticks_slider .e-scale :nth-child(5)::before {
  color: orange;
}

#ticks_slider .e-scale :nth-child(6)::before {
  color: pink;
}

#ticks_slider .e-scale .e-custom::before {
  font-size: 10px;
}

#ticks_slider .e-scale .e-custom::before {
  top: calc(50% + 1px);
  left: calc(50% - 5px);
}

#slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
  top: calc(50% + 1px);
  left: calc(0% - 5px);
}

#slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
  top: calc(50% + 1px);
  left: calc(100% - 6px);
}

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

function App() {

  let defaultObj: SliderComponent;
  let value: number[] = [30, 70];

  let icon: object = { placement: 'Before', largeStep: 20 };

  let custom: object = { placement: 'Both', largeStep: 20, smallStep: 5 };


  function iconTicks(args: SliderTickEventArgs): void {
    if (args.tickElement.classList.contains('e-large')) {
        args.tickElement.classList.add('e-custom');
    }
  }

  function customTicks(args: SliderTickRenderedEventArgs): void {
    let li: any = args.ticksWrapper.getElementsByClassName('e-large');
    let remarks: any = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
    for (let i: number = 0; i < li.length; ++i) {
        (li[i].querySelectorAll('.e-tick-both')[1] as HTMLElement).innerText = remarks[i];
    }
  }

  return (
    <div id='container'>
      <div className="col-lg-12 control-section">
        <div className="slider-content-wrapper">
            <div className="slider_container" id="slider_wrapper">
              <div className="slider_labelText userselect">Dynamic ticks color</div>
              <SliderComponent id='ticks_slider'
                type='MinRange'
                min={0} max={100} step={5} value={30} ticks={icon} renderingTicks={iconTicks.bind(this)} />
            </div>

            <div className="slider_container">
              <div className="slider_labelText userselect">Ticks with legends</div>
              <SliderComponent id='slider' type='MinRange'
                min={0} max={100} value={value} ticks={custom} renderedTicks={customTicks.bind(this)} />
            </div>
          <div/>
        </div>
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Customize the thumb

Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, slider has unique class e-handle for slider thumb. You can override the following class as per your requirement.

.e-control.e-slider .e-handle {
    background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
    background-color: transparent;
    height: 25px;
    width: 25px;
}
#square_slider.e-control.e-slider .e-handle {
    border-radius: 0%;
    background-color: #f9920b;
    border: 0;
}
#circle_slider.e-control.e-slider .e-handle {
    border-radius: 50%;
    background-color: #f9920b;
    border: 0;
}
#oval_slider.e-control.e-slider .e-handle {
    height: 25px;
    width: 8px;
    top: 3px;
    border-radius: 15px;
    background-color: #f9920b;
}

Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    return (<div id='container'>
      <div className="col-lg-12 control-section">
        <div className="slider-content-wrapper">
          <div className="slider_container">
              <div className="labelText slider-userselect">Square</div>
              <SliderComponent id='square_slider' min={0} max={100} value={30}/>
          </div>

          <div className="slider_container">
              <div className="labelText slider-userselect">Circle</div>
              <SliderComponent id='circle_slider' min={0} max={100} value={30}/>
          </div>

          <div className="slider_container">
              <div className="labelText slider-userselect">Oval</div>
              <SliderComponent id='oval_slider' min={0} max={100} value={30}/>
          </div>

          <div className="slider_container">
              <div className="labelText slider-userselect">Custom image</div>
              <SliderComponent id='image_slider' min={0} max={100} value={30}/>
          </div>
        </div>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.slider-content-wrapper {
  width: 40%;
  margin: 0 auto;
  min-width: 185px;
}

.slider-userselect {
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}

.labelText {
  text-align: left;
  font-weight: 500;
  padding-bottom: 10px;
}

.slider_container {
  margin-top: 40px;
}

.e-bigger .content-wrapper {
  width: 80%;
}

#square_slider .e-handle {
  border-radius: 0;
  background-color: #f9920b;
  border: 0;
}

#circle_slider .e-handle {
  background-color: #f9920b;
  border-radius: 50%;
  border: 0;
}

#image_slider .e-handle {
  height: 25px;
  width: 24px;
  background-size: 24px;

}

#image_slider .e-handle {
  background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0;
}

#square_slider .e-tab-handle::after,
#circle_slider .e-tab-handle::after {
  background-color: #f9920b;
}

#image_slider .e-tab-handle::after {
  background-color: transparent;
}

#oval_slider .e-handle {
  height: 25px;
  width: 8px;
  top: 3px;
  border-radius: 15px;
  background-color: #f9920b;
}

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

function App() {

  return (
    <div id='container'>
      <div className="col-lg-12 control-section">
        <div className="slider-content-wrapper">
          <div className="slider_container">
              <div className="labelText slider-userselect">Square</div>
              <SliderComponent id='square_slider' min={0} max={100} value={30} />
          </div>

          <div className="slider_container">
              <div className="labelText slider-userselect">Circle</div>
              <SliderComponent id='circle_slider' min={0} max={100} value={30} />
          </div>

          <div className="slider_container">
              <div className="labelText slider-userselect">Oval</div>
              <SliderComponent id='oval_slider' min={0} max={100} value={30} />
          </div>

          <div className="slider_container">
              <div className="labelText slider-userselect">Custom image</div>
              <SliderComponent id='image_slider' min={0} max={100} value={30} />
          </div>
        </div>
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Validate the slider using FormValidator

The Slider component can be validated using our FormValidator. The following steps walk-through slider validation.

Render slider component inside a form.
Bind changed event in the slider component to validate the slider value when the value changes.
Initialize and render FormValidator for the form using form ID.

// Initialize Form validation
let formObj: FormValidator;
formObj = new FormValidator("#formId", options);

Set the required property in the FormValidator rules collection. Here, the min property of slider that sets the minimum value in the slider component is set, and it has hidden input as enable validateHidden property is set to true.

// Slider element
<div id="default" name="slider"></div>

// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
  rules: {
'default': {
  validateHidden: true,
  min: [6, "You must select value greater than 5"]
}
  }
};

Form validation is done either by ID or name value of the slider component. Above ID of the slider is used to validate it.

Using slider name: Render slider with name attribute. In the following code snippet, name attribute value of slider is used for form validation.

// Slider element
<div id="default" name="slider"></div>

// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
  rules: {
'slider': {
  validateHidden: true,
  min: [6, "You must select value greater than 5"]
}
  }
};

Validate the form using validate method, and it validates the slider value with the defined rules collection and returns the result. If user selects the value less than the minimum value, form will not submit.

formObj.validate();

Slider validation can be done during value changes in slider. Refer to the following code snippet.

// change event handler for slider
function onChanged(args: any) {
  formObj.validate();
}

The FormValidator has following default validation rules, which are used to validate the Slider component.

Rules	Description	Example
`max`	Slider component must have value less than or equal to `max` number	if `max: 3`, 3 is valid and 4 is invalid
`min`	Slider component must have value greater than or equal to `min` number	if `min: 4`, 5 is valid and 2 is invalid
`regex`	Slider component must have valid value in `regex` format	if `regex: '/4/`, 4 is valid and 1 is invalid
`range`	Slider component must have value between `range` number	if `range: [4,5]`, 4 is valid and 6 is invalid

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { FormValidator } from '@syncfusion/ej2-inputs';
function App() {
    let ticks = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
    let value = [30, 70];
    // sets required property in the FormValidator rules collection
    let minOptions = {
        rules: {
            'min-slider': {
                validateHidden: true,
                min: [40, "You must select value greater than or equal to 40"]
            }
        }
    };
    // sets required property in the FormValidator rules collection
    let maxOptions = {
        rules: {
            'max-slider': {
                validateHidden: true,
                max: [40, "You must select value less than or equal to 40"]
            }
        }
    };
    // sets required property in the FormValidator rules collection
    let valOptions = {
        rules: {
            'val-slider': {
                validateHidden: true,
                regex: [/40/, "You must select value equal to 40"]
            }
        }
    };
    // sets required property in the FormValidator rules collection
    let rangeOptions = {
        rules: {
            'range-slider': {
                validateHidden: true,
                range: [40, 80, "You must select values between 40 and 80"]
            }
        }
    };
    // sets required property in the FormValidator rules collection
    let customOptions = {
        rules: {
            'custom-slider': {
                validateHidden: true,
                range: [validateRange.bind(this), "You must select values between 40 and 80"]
            }
        }
    };
    // Initialize Form validation
    let formMinObj;
    let formMaxObj;
    let formValObj;
    let formRangeObj;
    let formCustomObj;
    formMinObj = new FormValidator("#formMinId", minOptions);
    formMaxObj = new FormValidator("#formMaxId", maxOptions);
    formValObj = new FormValidator("#formValId", valOptions);
    formRangeObj = new FormValidator("#formRangeId", rangeOptions);
    formCustomObj = new FormValidator("#formCustomId", customOptions);
    function onMinChanged(args) {
        // validate the slider value in the form
        formMinObj.validate();
    }
    function onMaxChanged(args) {
        // validate the slider value in the form
        formMaxObj.validate();
    }
    function onValChanged(args) {
        // validate the slider value in the form
        formValObj.validate();
    }
    function onRangeChanged(args) {
        // validate the slider value in the form
        formRangeObj.validate();
    }
    function onCustomChanged(args) {
        // validate the slider value in the form
        formCustomObj.validate();
    }
    let SliderCustomObj;
    function validateRange(args) {
        return SliderCustomObj.value[0] >= 40 && SliderCustomObj.value[1] <= 80;
    }
    return (<div id='container'>
  <div className="col-lg-12 control-section">
    <div className="content-wrapper">
        <div className="form-title">
            <span>Min</span>
        </div>
        <form id="formMinId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='min-slider' name="min-slider" type='MinRange' value={30} ticks={ticks} changed={onMinChanged.bind(this)}/>
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Max</span>
        </div>
        <form id="formMaxId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='max-slider' name="max-slider" type='MinRange' value={30} ticks={ticks} changed={onMaxChanged.bind(this)}/>
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Value</span>
        </div>
        <form id="formValId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='val-slider' name='val-slider' type='MinRange' value={30} ticks={ticks} changed={onValChanged.bind(this)}/>
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Range</span>
        </div>
        <form id="formRangeId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='range-slider' name='range-slider' type='MinRange' value={30} ticks={ticks} changed={onRangeChanged.bind(this)}/>
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Custom</span>
        </div>
        <form id="formCustomId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='custom-slider' name='custom-slider' type='Range' value={value} ticks={ticks} changed={onCustomChanged.bind(this)} ref={(slider) => { SliderCustomObj = slider; }}/>
                </div>
            </div>
        </form>
    </div>
  </div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.highcontrast form {
  background: #000000
}

/* csslint ignore:start */
.highcontrast label.e-custom-label,
.highcontrast label.e-float-text,
.highcontrast label.salary,
.highcontrast input::placeholder,
.highcontrast .e-float-input label.e-float-text {
  color: #fff !important;
  line-height: 2.3;
}
/* csslint ignore:end */

.e-error,
.e-float-text {
  font-weight: 500;
}

table,
td,
th {
  padding: 5px;
}

.form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}

form {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
  border-radius: 5px;
  background: #f9f9f9;
  padding: 23px;
  padding-bottom: 20px;
  margin: auto;
  max-width: 650px;
}

.form-title {
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  color: black;
}

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

function App() {
  let ticks: object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
  let value: number[] = [30, 70];

  // sets required property in the FormValidator rules collection
  let minOptions: FormValidatorModel = {
rules: {
  'min-slider': {
    validateHidden: true,
    min: [40, "You must select value greater than or equal to 40"]
  }
}
  };

  // sets required property in the FormValidator rules collection
  let maxOptions: FormValidatorModel = {
rules: {
  'max-slider': {
    validateHidden: true,
    max: [40, "You must select value less than or equal to 40"]
  }
}
  };

  // sets required property in the FormValidator rules collection
  let valOptions: FormValidatorModel = {
rules: {
  'val-slider': {
    validateHidden: true,
    regex: [/40/, "You must select value equal to 40"]
  }
}
  };

  // sets required property in the FormValidator rules collection
  let rangeOptions: FormValidatorModel = {
rules: {
  'range-slider': {
    validateHidden: true,
    range: [40, 80, "You must select values between 40 and 80"]
  }
}
  };

  // sets required property in the FormValidator rules collection
  let customOptions: FormValidatorModel = {
rules: {
  'custom-slider': {
    validateHidden: true,
    range: [validateRange.bind(this), "You must select values between 40 and 80"]
  }
}
  };

  // Initialize Form validation
  let formMinObj: FormValidator;

  let formMaxObj: FormValidator;

  let formValObj: FormValidator;

  let formRangeObj: FormValidator;

  let formCustomObj: FormValidator;

  formMinObj = new FormValidator("#formMinId", minOptions);
  formMaxObj = new FormValidator("#formMaxId", maxOptions);
  formValObj = new FormValidator("#formValId", valOptions);
  formRangeObj = new FormValidator("#formRangeId", rangeOptions);
  formCustomObj = new FormValidator("#formCustomId", customOptions);

  function onMinChanged(args: any): void {
// validate the slider value in the form
formMinObj.validate();
  }

  function onMaxChanged(args: any): void {
// validate the slider value in the form
formMaxObj.validate();
  }

  function onValChanged(args: any): void {
// validate the slider value in the form
formValObj.validate();
  }

  function onRangeChanged(args: any) {
// validate the slider value in the form
formRangeObj.validate();
  }

  function onCustomChanged(args: any) {
// validate the slider value in the form
formCustomObj.validate();
  }

  let SliderCustomObj: SliderComponent;

  function validateRange(args: any) {
return (SliderCustomObj.value as number[])[0] >= 40 && (SliderCustomObj.value as number[])[1] <= 80;
  }

  return (
<div id='container'>
  <div className="col-lg-12 control-section">
    <div className="content-wrapper">
        <div className="form-title">
            <span>Min</span>
        </div>
        <form id="formMinId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='min-slider' name="min-slider" type='MinRange' value={30} ticks={ticks}
                      changed={onMinChanged.bind(this)} />
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Max</span>
        </div>
        <form id="formMaxId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='max-slider' name="max-slider" type='MinRange' value={30} ticks={ticks}
                      changed={onMaxChanged.bind(this)} />
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Value</span>
        </div>
        <form id="formValId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='val-slider' name='val-slider' type='MinRange' value={30} ticks={ticks}
                      changed={onValChanged.bind(this)} />
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Range</span>
        </div>
        <form id="formRangeId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='range-slider' name='range-slider' type='MinRange' value={30} ticks={ticks}
                      changed={onRangeChanged.bind(this)} />
                </div>
            </div>
        </form>
        <div className="form-title">
            <span>Custom</span>
        </div>
        <form id="formCustomId" className="form-horizontal">
            <div className="form-group">
                <div className="e-float-input">
                    <SliderComponent id='custom-slider' name='custom-slider' type='Range' value={value}
                      ticks={ticks} changed={onCustomChanged.bind(this)}
                      ref={(slider) => { SliderCustomObj = slider }} />
                </div>
            </div>
        </form>
    </div>
  </div>
</div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Contents

Value formatting using slider
Date Format
Time Format
Numeric Value Customization
Km largeStep 20 smallStep 10 showSmallTicks true
Km
Customize the bar
Customize the limits
Customize the ticks
Customize the thumb
Validate the slider using FormValidator

Contents

Value formatting using slider
Date Format
Time Format
Numeric Value Customization
Km largeStep 20 smallStep 10 showSmallTicks true
Km
Customize the bar
Customize the limits
Customize the ticks
Customize the thumb
Validate the slider using FormValidator

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!