Versions Compared

Version Old Version 16 New Version 17
Changes made by

Femi

Femi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Html macro
sanitizefalse
<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>
var eventname = new Event('input')
//
	    // Style multiple input ranges
	    for (let item of rangeSelector) {
	      item.addEventListener('input', function() {// WARNING: each input range need to have an unique ID
	    //

	    "use strict";
	  let rangeInterval = Number(this.getAttribute('max') - this.getAttribute('min'));
const DEBUG = true;

	    var inlineStyle   let rangePercent = (Number(this.value) + Math.abs(this.getAttribute('min'))) / rangeInterval * 100;

document.createElement('style');
	    var rangeSelector =  //DEBUG ? console.log("#" + this.id + ": " + rangePercent + "%") : ''; // for debug

document.querySelectorAll('[type=range]');
	    var inlineStyleContent = new Array;

	    document.body.appendChild(inlineStyle);

	    var eventname = new writeStyle({
Event('input')

	    for (let item of rangeSelector) {
id: this.id,
		      item.addEventListener('input', function() {
	   percent: rangePercent 	   let rangeInterval = Number(this.getAttribute('max')  }- this.getAttribute('min'));
	      }, false); let 	rangePercent = (Number(this.value)    item.dispatchEvent(eventname); // update bars at startup
	    }

	+ Math.abs(this.getAttribute('min'))) / rangeInterval * 100;

	        /**/DEBUG 	     * Write Style element
	     *? console.log("#" + this.id + ": " + rangePercent + "%") : ''; // for debug

	     *  @param writeStyle({object}
obj	 id: HTML id, percent: value 	     */id: this.id,
	    function writeStyle(obj) {
	         percent: rangePercent
	   var find = inlineStyleContent.map(x => x.id).indexOf(obj.id });
	      var styleText = ""}, false);

	      if (find === -1) {
	  item.dispatchEvent(eventname); // update bars at startup
	    }

inlineStyleContent.push(obj)
	      } else {
/**
	     * Write Style inlineStyleContent[find] = obj;
element
	      }* 
	     * for (let item of inlineStyleContent) {
	  @param {object} obj id: HTML id, percent: value
	     */
styleText	 += '#' + item.id + '::-webkit-slider-runnable-track{background-size:' + item.percent + '% 100%} ';
	      }

	      inlineStyle.textContent = styleText;function writeStyle(obj) {
	      var find = inlineStyleContent.map(x => x.id).indexOf(obj.id);
	      var styleText = "";

	    } 	 if (find === -1) {
	      	  inlineStyleContent.push(obj)
	   	   } $(function () else {
	    	    $('.range-container').numericStepButtons();
    	});inlineStyleContent[find] = obj;
	      }

	//simple jQuery plugin     	$.fn.numericStepButtons = function (for (let item of inlineStyleContent) {

   	    return this.each(function () { styleText += '#' + 	item.id + '::-webkit-slider-runnable-track{background-size:' + item.percent + '% 100%} var $numeric = $('input[type="range"], input[type="number"]', this).eq(0);';
	      }

	      inlineStyle.textContent  $('[type="button"][data-step]', this).on('click', function () {
    = styleText;
	            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">
									<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">
									<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">
		<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}
	     
</script>

<div class="card">
			<div class="card-header">Slider <button id="toggleMarkup" type="button" class="btn icon-btn icon-btn-light btn-sm" data-step="1">
		<i class="icon-right"></i>
	</button>
</div></script></code></pre>
						</div>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>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled<>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">
disabled>
									<i class="icon-left"></i>
								</button>
								<div class="range-slider">
									<input id="range2range1" 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" 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">
disabled>
		<i class="icon-left"></i>
	</button>
	<div class="range-slider">
		<input id="range2range1" 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">
disabled>
		<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">Error<>Disabled</label>
						<div class="col-lg-4">
							<div class="range-container">
								<button type="button" class="btn icon-btn icon-btn-light btn-sm is-invalid" data-step="-1"> disabled>
									<i class="icon-left"></i>
								</button>
								<div class="range-slider">
									<input id="range3range2" type="range" class="form-control form-control-sm is-invalid" 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 is-invalid" data-step="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 is-invalid" data-step="-1"> disabled>
		<i class="icon-left"></i>
	</button>
	<div class="range-slider">
		<input id="range3range2" type="range" class="form-control form-control-sm is-invalid" 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 is-invalid" data-step="1"> disabled>
		<i class="icon-right"></i>
	</button>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

...