...
Sliders allow users to select a value from a predefined range.
...
Types
Type | Usage | Image |
|---|---|---|
Single-value slider | Use to select a single value from a predefined range. |  |
Range slider | Use to select a range of values, within minimum and maximum values. See Range Slider below. |  |
Usage & Behavior
General guidelines
Sliders may appear in forms, Dialogs, Filter Panels, or Widgets.
The set of values can be either discrete or continuous, depending on the number of values (see Structure below).
...
A set of values, ordered from minimum to maximum, for all or some of the values.
For numeric values - a supplemental text field allowing the user to view the selected value and to change it manually.
When dragging - a tooltip on top (or to the side) of the handle, showing the relevant value:
...
Default State
A slider must have a default value. Usually it is the most common or popular value.
...
In most cases, values will be numbers with a fixed increment between them (e.g. 1, 2, 3… or 5, 10, 15, 20…).
Alternatively, values can be textual (e.g. Poor, Fair, Average, Good, Excellent) or icon-based (e.g. sentiment indicators).
States
State | Image | Comment |
|---|---|---|
Normal | | |
Hover |  | |
Active |  | |
Disabled |  | |
Focused |  | |
Focused Hover |  | |
Focused Active |  | |
Focused Disabled |  | |
Warning |
 |
Interaction
Hovering the slider will show the current value in a tooltip above (or to the side of) the selected value.
The user can select a value using one of these methods:
Dragging the handle to the desired position (see Drag and Drop). In this case:
If ticks exist, the movement of the handle across the axis will be discrete, along the tick marks.
If no ticks exist, the movement will be continuous.
If a text field exists, the value will be updated automatically.
a tooltip may appear, showing the value
Clicking on the axis itself. In this case the handle will move to the selected position.
Clicking the increase or decrease buttons. In this case:
The handle will move to the the next / previous position respectively.
If a text field exists, the value will be updated automatically.
Entering a value in the text field, if one exists. In this case, the handle will automatically move to the relevant position on the axis after moving the focus away from the text field.
Using the mouse wheel when the slider is selected. In this case, the handle will move to the relevant position on the axis and the value will be updated automatically.
...
If one or more of the conditions above is not met → use Radio Buttons or a Drop-down Menu.
For selecting dates → use a Date Picker or Range Picker instead.
Range Slider
| Basic range slider |
 | Range slider with input fields |
A range slider is a variant of the slider, allowing users to select a range of values within the total range.
...
In the Focus stated for a single-value slider:
...
Using the left and right arrows will move the handle accordingly.
...
, if a supplementary text field exists, typing will enter/update the value.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
...
Zeplin link
...
Screen thumbnail
...
...
Focus management
Keyboard | Single selector | Range selector |
|---|---|---|
|  | |
Tab | Navigates to the next component. | Without input fields:
With input fields:
|
Shift + Tab | Navigates to the previous component. | Without input fields:
With input fields:
|
Space | N/A | N/A |
Enter | N/A | N/A |
Esc | N/A | N/A |
Arrows | Up/Down or Left/Right - Increases or decreases the value accordingly. | Up/Down or Left/Right - Increases or decreases the value accordingly. |
Page Up | Increases the slider value by multiple steps, e.g. by ten steps. | Increases the slider value by multiple steps, e.g. by ten steps. |
Page Down | Decreases the slider value by multiple steps, e.g. by ten steps. | Decreases the slider value by multiple steps, e.g. by ten steps. |
Home | Sets slider to its minimum value. | Sets slider to its minimum value. |
End | Sets slider to its maximum value. | Sets slider to its maximum value. |
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Slider <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="range-container">
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="-1" tabindex="-1">
<i class="icon-left"></i>
</button>
<div class="range-slider">
<input id="range1" type="range" class="form-control form-control-sm" min="0" max="100" step="10" list="range1Ticks" />
<datalist id="range1Ticks" class="range-slider-ticks">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>100</option>
</datalist>
</div>
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="1" tabindex="-1">
<i class="icon-right"></i>
</button>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="range-container">
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="-1" tabindex="-1">
<i class="icon-left"></i>
</button>
<div class="range-slider">
<input id="range1" type="range" class="form-control form-control-sm" min="0" max="100" step="10" list="range-slider-ticks" />
<datalist class="range-slider-ticks">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>100</option>
</datalist>
</div>
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="1" tabindex="-1">
<i class="icon-right"></i>
</button>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="range-container">
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="-1" tabindex="-1" disabled>
<i class="icon-left"></i>
</button>
<div class="range-slider">
<input id="range2" type="range" class="form-control form-control-sm" min="0" max="100" step="10" list="range2Ticks" disabled />
<datalist id="range2Ticks" class="range-slider-ticks">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>100</option>
</datalist>
</div>
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="1" tabindex="-1" disabled>
<i class="icon-right"></i>
</button>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="range-container">
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="-1" tabindex="-1" disabled>
<i class="icon-left"></i>
</button>
<div class="range-slider">
<input id="range2" type="range" class="form-control form-control-sm" min="0" max="100" step="10" list="range-slider-ticks" disabled />
<datalist class="range-slider-ticks">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>100</option>
</datalist>
</div>
<button type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="1" tabindex="-1" disabled>
<i class="icon-right"></i>
</button>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<script>
"use strict";
const DEBUG = true;
var inlineStyle = document.createElement('style');
var rangeSelector = document.querySelectorAll('[type=range]');
var inlineStyleContent = new Array;
document.body.appendChild(inlineStyle);
var eventname = new Event('input')
for (let item of rangeSelector) {
item.addEventListener('input', function() {
let rangeInterval = Number(this.getAttribute('max') - this.getAttribute('min'));
let rangePercent = (Number(this.value) + Math.abs(this.getAttribute('min'))) / rangeInterval * 100;
//DEBUG ? console.log("#" + this.id + ": " + rangePercent + "%") : ''; // for debug
if($(this).is(':enabled')){
let disableMinButton = (Number(this.value)) <= Math.abs(this.getAttribute('min'));
$(this).parents('.range-container').find('[data-step="-1"]').attr("disabled", disableMinButton);
let disableMaxButton = (Number(this.value)) >= Math.abs(this.getAttribute('max'));
$(this).parents('.range-container').find('[data-step="1"]').attr("disabled", disableMaxButton);
}
writeStyle({
id: this.id,
percent: rangePercent
});
}, false);
item.dispatchEvent(eventname); // update bars at startup
}
/**
* Write Style element
*
* @param {object} obj id: HTML id, percent: value
*/
function writeStyle(obj) {
var find = inlineStyleContent.map(x => x.id).indexOf(obj.id);
var styleText = "";
if (find === -1) {
inlineStyleContent.push(obj)
} else {
inlineStyleContent[find] = obj;
}
for (let item of inlineStyleContent) {
styleText += '#' + item.id + '::-webkit-slider-runnable-track{background-size:' + item.percent + '% 100%} ';
}
inlineStyle.textContent = styleText;
}
$(function () {
$('.range-container').numericStepButtons();
});
//simple jQuery plugin
$.fn.numericStepButtons = function () {
return this.each(function () {
var $numeric = $('input[type="range"], input[type="number"]', this).eq(0);
$('[type="button"][data-step]', this).on('click', function () {
var step = $(this).data('step');
$numeric[0].stepUp(step);
$numeric[0].dispatchEvent(new Event('input'));
return false;
});
});
};
</script> |
...