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