Content Comparison

<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'));
console.log("MIIIIIIIN:"+disableMinButton);
	      	$(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>

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