State	Image	Comment
Normal
Hover
Active
Disabled
Focused
Focused Hover
Focused Active
Focused Disabled
Warning	Image RemovedImage Added

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.

...

Keyboard	Single selector	Range selector

Tab	Navigates to the next component.	Without input fields: From the 1st handle will navigate to the 2nd handle. From the 2nd handle will navigate to the next component. With input fields: The handles will not be focused. From the 1st input field will navigate to the 2nd input field. From the 2nd input field will navigate to the next component.
Shift + Tab	Navigates to the previous component.	Without input fields: From the 2nd handle will navigate to the 1st handle. From the 1st handle will navigate to the previous component. With input fields: From the 2nd input field will navigate to the 1st input field. From the 1st input field will navigate to the previous component. The handles will not be focused.
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.

...

Zeplin link	Screen thumbnail
https://zpl.io/VqoY84b	Image RemovedImage Added

Code

Html macro

sanitize	false

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

...

Version	Old Version 35	New Version Current
Changes made by	Femi	Hasitha Jayarathne
Saved on	Jan 15, 2024	Dec 20, 2024

Content Comparison

Versions Compared

Key

Interaction

Code