How To

Format value using slider

Achieve 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 following sample.

Source
Preview
index.js
// Initialize slider component
var dateObj = new ej.inputs.Slider({
    /**
     * Initialize the min and max values of the slider using JavaScript date functions
     * new Date (Year, Month, day, hours, minutes, seconds, milliseconds)
     */
    min: new Date("2013-06-13").getTime(),
    value: new Date("2013-06-15").getTime(),
    max: new Date("2013-06-21").getTime(),
    // 86400000 milliseconds for a day
    step: 86400000,
    tooltipChange: function (args) {
        var totalMiliSeconds = Number(args.text);
        // Convert the current milliseconds to the respective date in desired format
        var custom = { year: "numeric", month: "short", day: "numeric" };
        args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
    },
    tooltip: {
        placement: 'Before',
        isVisible: true
    },
    renderingTicks: function (args) {
        var totalMiliSeconds = Number(args.value);
        // Convert the current milliseconds to the respective date in desired format
        var custom = { year: "numeric", month: "short", day: "numeric" };
        args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
    },
    ticks: {
        placement: 'After',
        // 2 * 86400000 milliseconds for two days
        largeStep: 2 * 86400000
    },
    showButtons: true
});
// Render initialized Slider
dateObj.appendTo('#slider');

Achieve time format

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

Source
Preview
index.js
// Initialize slider component
var timeObj = new ej.inputs.Slider({
    /**
     * Initialize the min and max values of the slider using JavaScript date functions
     * new Date (Year, Month, day, hours, minutes, seconds, milliseconds)
     */
    min: new Date(2013, 6, 13, 11).getTime(),
    max: new Date(2013, 6, 13, 17).getTime(),
    value: new Date(2013, 6, 13, 13).getTime(),
    // 3600000 milliseconds = 1 Hour
    step: 3600000,
    tooltipChange: function (args) {
        var totalMiliSeconds = Number(args.text);
        var custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
    },
    tooltip: {
        placement: 'Before',
        isVisible: true
    },
    renderingTicks: function (args) {
        var totalMiliSeconds = Number(args.value);
        var custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
    },
    ticks: {
        placement: 'After',
        // 2 * 3600000 milliseconds = 2 Hour
        largeStep: 2 * 3600000
    },
    showButtons: true
});
// Render initialized slider
timeObj.appendTo('#slider');

Customize numeric Value

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

Source
Preview
index.js
// Initialize slider component
var kilometerObj = new ej.inputs.Slider({
    min: 0, max: 100, step: 1, value: 30,
    // Apply two decimal specifiers formatting if any decimal values are processed with 'Km' text appended to the value
    tooltip: { isVisible: true, format: '##.## Km' },
    // Apply two decimal specifiers formatting if any decimal values are processed with 'Km' text appended to the value
    ticks: { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true }
});
// Render initialized slider
kilometerObj.appendTo('#slider');
// Initialize slider component
var decimalObj = new ej.inputs.Slider({
    min: 0.1, max: .2, step: 0.01, value: 0.13,
    // Apply three decimal specifiers formatting if any decimal values are processed then reset will be appened with two zero
    tooltip: { isVisible: true, format: '##.#00' },
    // Apply three decimal specifiers formatting if any decimal values are processed then reset will be appened with two zero
    ticks: { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true }
});
// Render initialized slider
decimalObj.appendTo('#slider1');
// Initialize slider component
var sliderObj = new ej.inputs.Slider({
    min: 0, max: 100, step: 1, value: 30,
    // Apply numberic formatting with two leading zero for tooltip
    tooltip: { isVisible: true, format: '00##' },
    // Apply numberic formatting with two leading zero for ticks
    ticks: { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true }
});
// Render initialized slider
sliderObj.appendTo('#slider2');

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%);
}

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

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';
        }
    }
Source
Preview
index.js
index.html
index.css
// Initialize slider component
var heightSlider = new ej.inputs.Slider({
    // Set the value for slider
    value: 30,
    min: 0, max: 100
});
heightSlider.appendTo('#height_slider');
// Initialize slider component
var gradientSlider = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the initial range values for slider
    value: 30,
    type: 'MinRange'
});
gradientSlider.appendTo('#gradient_slider');
var sliderTrack;
var sliderHandle;
// Initialize slider component
var dynamicColorSlider = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    value: 30,
    type: 'MinRange',
    // Handler used for slider created event
    created: function () {
        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';
    },
    // Handler used for slider change event
    change: function (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';
        }
    }
});
dynamicColorSlider.appendTo('#dynamic_color_slider');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Slider</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Slider Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="col-lg-12 control-section">
            <div class="slider-content-wrapper">
                <div class="slider_container">
                    <div class="slider-labeltext slider_userselect">Height</div>
                    <!-- Square slider element -->
                    <div id="height_slider"></div>
                </div>
                <div class="slider_container">
                    <div class="slider-labeltext slider_userselect">Gradient color</div>
                    <div id="gradient_slider"></div>
                </div>
                <div class="slider_container">
                    <div class="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
                    <div id="dynamic_color_slider"></div>
                </div>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.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;
}

Customize the limits

Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized. 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.

.e-slider-container.e-horizontal .e-limits {
     background-color: rgba(69, 100, 233, 0.46);
}
Source
Preview
index.js
index.html
index.css
var minrangeObj = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the value for slider
    value: 30,
    // Set the step value
    step: 1,
    // Initialize ticks with placement, largestep, smallstep
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    // Set the type for slider
    type: 'MinRange',
    // Set the limit values for the slider
    limits: { enabled: true, minStart: 10, minEnd: 40 },
    // Initialize tooltip with placement and showOn
    tooltip: { isVisible: true, placement: 'Before', showOn: 'Focus' }
});
minrangeObj.appendTo('#minrange');
// Initialize slider Component
var rangeObj = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the initial range values for slider
    value: [30, 70],
    // Set the step value
    step: 1,
    // Set the type to render range slider
    type: 'Range',
    // Initialize ticks with placement, largestep, smallstep
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    // Set the limit values for the slider
    limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 },
    // Initialize tooltip with placement and showOn
    tooltip: { isVisible: true, placement: 'Before', showOn: 'Focus' }
});
rangeObj.appendTo('#range');
// Initialize NumericTextBox
var minStart = new ej.inputs.NumericTextBox({
    value: 10,
    min: 0,
    max: 100,
    change: minStartChange
});
minStart.appendTo('#minStart');
var minEnd = new ej.inputs.NumericTextBox({
    value: 40,
    min: 0,
    max: 100,
    change: minEndChange
});
minEnd.appendTo('#minEnd');
var maxStart = new ej.inputs.NumericTextBox({
    value: 60,
    min: 0,
    max: 100,
    change: maxStartChange
});
maxStart.appendTo('#maxStart');
var maxEnd = new ej.inputs.NumericTextBox({
    value: 90,
    min: 0,
    max: 100,
    change: maxEndChange
});
maxEnd.appendTo('#maxEnd');
// Initialize Checkbox
var fixedOne = new ej.buttons.CheckBox({ change: fixOne });
fixedOne.appendTo('#fixedOne');
var fixedSecond = new ej.buttons.CheckBox({ change: fixSecond });
fixedSecond.appendTo('#fixedSecond');
// Eventlisteners to lock first handle of the both sliders
function fixOne(args) {
    minrangeObj.limits.startHandleFixed = args.checked;
    rangeObj.limits.startHandleFixed = args.checked;
}
// Eventlisteners to lock second handle of the both sliders
function fixSecond(args) {
    minrangeObj.limits.endHandleFixed = args.checked;
    rangeObj.limits.endHandleFixed = args.checked;
}
// Eventlisteners to change limit values for both sliders
function minStartChange(args) {
    minrangeObj.limits.minStart = args.value;
    rangeObj.limits.minStart = args.value;
}
function minEndChange(args) {
    minrangeObj.limits.minEnd = args.value;
    rangeObj.limits.minEnd = args.value;
}
function maxStartChange(args) {
    minrangeObj.limits.maxStart = args.value;
    rangeObj.limits.maxStart = args.value;
}
function maxEndChange(args) {
    minrangeObj.limits.maxEnd = args.value;
    rangeObj.limits.maxEnd = args.value;
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Slider</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Slider Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="col-lg-8 control-section">
            <div class="content-wrapper">
                <div class="sliderwrap">
                    <label class="userselect">MinRange Slider With Limits</label>
                    <div id="minrange"></div>
                </div>
                <div class="sliderwrap">
                    <label class="userselect">Range Slider With Limits</label>
                    <div id="range"></div>
                </div>
            </div>
        </div>         
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.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);
}

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;
}

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.

#ticks_slider .e-scale :nth-child(1)::before {
    color: red;
}
Source
Preview
index.js
var ticksSlider = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the initial value for slider
    value: 30,
    // Set the step value for slider
    step: 5,
    // Set the type to render minRange slider
    type: 'MinRange',
    // Initialize ticks with placement, largestep
    ticks: { placement: 'Before', largeStep: 20 },
    // Handler used to add custom class to all tick element
    renderingTicks: function (args) {
        if (args.tickElement.classList.contains('e-large')) {
            args.tickElement.classList.add('e-custom');
        }
    }
});
ticksSlider.appendTo('#ticks_slider');
// Initialize slider component
var customTicks = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the initial value for slider
    value: 30,
    // Set the type to render minRange slider
    type: 'MinRange',
    // Initialize ticks with placement, largestep, smallstep
    ticks: { placement: 'Both', largeStep: 20, smallStep: 5 },
    // Handler used to customize tick element
    renderedTicks: function (args) {
        var li = args.ticksWrapper.getElementsByClassName('e-large');
        var remarks = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
        for (var i = 0; i < li.length; ++i) {
            li[i].querySelectorAll('.e-tick-both')[1].innerText = remarks[i];
        }
    }
});
customTicks.appendTo('#slider');

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. Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized.

.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;
}
Source
Preview
index.js
index.html
index.css
// Initialize slider component
var squareSlider = new ej.inputs.Slider({
    // Set the value for slider
    value: 30,
    min: 0, max: 100
});
squareSlider.appendTo('#square_slider');
// Initialize slider component
var circleSlider = new ej.inputs.Slider({
    // Set the value for slider
    value: 30,
    // Set slider minimum and maximum values
    min: 0, max: 100
});
circleSlider.appendTo('#circle_slider');
// Initialize slider component
var ovalSlider = new ej.inputs.Slider({
    // Set the value for slider
    value: 30,
    // Set slider minimum and maximum values
    min: 0, max: 100
});
ovalSlider.appendTo('#oval_slider');
// Initialize slider component
var imageSlider = new ej.inputs.Slider({
    // Set the value for slider
    value: 30,
    // Set slider minimum and maximum values
    min: 0, max: 100,
    ticks: { placement: 'After' }
});
imageSlider.appendTo('#image_slider');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Slider</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Slider Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="col-lg-12 control-section">
            <div class="slider-content-wrapper">
                <div class="slider_container">
                    <div class="labelText slider-userselect">Square</div>
                    <!-- Square slider element -->
                    <div id="square_slider"></div>
                </div>
                <div class="slider_container">
                    <div class="labelText slider-userselect">Circle</div>
                    <!-- Circle slider element -->
                    <div id="circle_slider"></div>
                </div>
                <div class="slider_container">
                    <div class="labelText slider-userselect">Oval</div>
                    <!-- Oval slider element -->
                    <div id="oval_slider"></div>
                </div>
                <div class="slider_container">
                    <div class="labelText slider-userselect">Custom image</div>
                    <!-- Image slider element -->
                    <div id="image_slider"></div>
                </div>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.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;
  font-size: 13px;
  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;
}

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.js
index.html
index.css
// Initialize Slider component
var SliderMinObj = new ej.inputs.Slider({
    type: 'MinRange',
    value: 30,
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    changed: onMinChanged
});
SliderMinObj.appendTo("#min-slider");
// sets required property in the FormValidator rules collection
var minOptions = {
    rules: {
        'min-slider': {
            validateHidden: true,
            min: [40, "You must select value greater than or equal to 40"]
        }
    }
};
// Initialize Form validation
var formMinObj = new FormValidator("#formMinId", minOptions);
function onMinChanged(args) {
    // validate the slider value in the form
    formMinObj.validate();
}
// Initialize Slider component
var SliderMaxObj = new ej.inputs.Slider({
    type: 'MinRange',
    value: 30,
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    changed: onMaxChanged
});
SliderMaxObj.appendTo("#max-slider");
// sets required property in the FormValidator rules collection
var maxOptions = {
    rules: {
        'max-slider': {
            validateHidden: true,
            max: [40, "You must select value less than or equal to 40"]
        }
    }
};
// Initialize Form validation
var formMaxObj = new ej.inputs.FormValidator("#formMaxId", maxOptions);
function onMaxChanged(args) {
    // validate the slider value in the form
    formMaxObj.validate();
}
// Initialize Slider component
var SliderValObj = new ej.inputs.Slider({
    type: 'MinRange',
    value: 30,
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    changed: onValChanged
});
SliderValObj.appendTo("#val-slider");
// sets required property in the FormValidator rules collection
var valOptions = {
    rules: {
        'val-slider': {
            validateHidden: true,
            regex: [/40/, "You must select value equal to 40"]
        }
    }
};
// Initialize Form validation
var formValObj = new ej.inputs.FormValidator("#formValId", valOptions);
function onValChanged(args) {
    // validate the slider value in the form
    formValObj.validate();
}
// Initialize Slider component
var SliderRangeObj = new ej.inputs.Slider({
    type: 'MinRange',
    value: 30,
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    changed: onRangeChanged
});
SliderRangeObj.appendTo("#range-slider");
// sets required property in the FormValidator rules collection
var rangeOptions = {
    rules: {
        'range-slider': {
            validateHidden: true,
            range: [40, 80, "You must select values between 40 and 80"]
        }
    }
};
// Initialize Form validation
var formRangeObj = new ej.inputs.FormValidator("#formRangeId", rangeOptions);
function onRangeChanged(args) {
    // validate the slider value in the form
    formRangeObj.validate();
}
// Initialize Slider component
var SliderCustomObj = new ej.inputs.Slider({
    type: 'Range',
    value: [30, 70],
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    changed: onCustomChanged
});
SliderCustomObj.appendTo("#custom-slider");
// sets required property in the FormValidator rules collection
var customOptions = {
    rules: {
        'custom-slider': {
            validateHidden: true,
            range: [validateRange, "You must select values between 40 and 80"]
        }
    }
};
// Initialize Form validation
var formCustomObj = new ej.inputs.FormValidator("#formCustomId", customOptions);
function onCustomChanged(args) {
    // validate the slider value in the form
    formCustomObj.validate();
}
function validateRange(args) {
    return SliderCustomObj.value[0] >= 40 && SliderCustomObj.value[1] <= 80;
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Slider</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Slider Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="col-lg-12 control-section">
            <div class="content-wrapper" style="margin-bottom: 25px;overflow-x: hidden">
                <div class="form-title">
                    <span>Min</span>
                </div>
                <form id="formMinId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="min-slider" name="min-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Max</span>
                </div>
                <form id="formMaxId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="max-slider" name="max-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Value</span>
                </div>
                <form id="formValId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="val-slider" name="val-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Range</span>
                </div>
                <form id="formRangeId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="range-slider" name="range-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Custom</span>
                </div>
                <form id="formCustomId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="custom-slider" name="custom-slider"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.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;
}