<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">
<script>
//
// Style multiple input ranges
// WARNING: each input range need to have an unique ID
//
"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
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'));
<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" placeholder="Guiding Text" 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>
</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" placeholder="Guiding Text" 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" placeholder="Guiding Text" 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>
</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" placeholder="Guiding Text" 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
let disableMinButton = return false;(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'));
</script>
<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" placeholder="Guiding Text" 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>
</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" placeholder="Guiding Text" 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" placeholder="Guiding Text" 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>
</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" placeholder="Guiding Text" 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> $(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> |