Search results

Customize the limits in JavaScript (ES5) Range Slider control

29 Mar 2023 / 3 minutes to read

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.

Copied to clipboard
.e-slider-container.e-horizontal .e-limits {
     background-color: rgba(69, 100, 233, 0.46);
}
Source
Preview
index.js
index.html
index.css
Copied to clipboard
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;
}
Copied to clipboard
<!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/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/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>
Copied to clipboard
#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);
}