Input Range Slider

Split Value (percentage) into 2 values using Input Range Slider and display results in real time

by Mark Hendricks

HTML

<h4>Input Range Slider - Split Percentage Example(s)</h4>

<div class="example">
  <div class="range-slider">
    <input class="split" readonly>
    <input id="slider1" type="range" min="0" max="100" step="1" value="50" class="input-range">
    <input class="split" readonly>
    <span class="description">Split Percentage</span>
  </div>
  <div class="range-slider">
    <input class="split" readonly>
    <input id="slider2" type="range" min="0" max="1" step=".01" value=".5" class="input-range">
    <input class="split" readonly>
    <span class="description">Split Percentage Decimal Equivalent</span>
  </div>
  <div class="range-slider">
    <input class="split" readonly>
    <input id="slider3" type="range" min="0" max="500" step="10" value="500" class="input-range">
    <input class="split" readonly>
    <span class="description">Split Value, Increment by by 10's, Initial value 500, Range 0-500</span>
  </div>
</div>

CSS

.split {
			  width: 40px;
			}

			* {
			  -webkit-box-sizing: border-box;
			  -moz-box-sizing: border-box;
			}

			body {
			  font-family: sans-serif;
			  padding: 40px;
			}

			div.range-slider {
			  padding-bottom: 6px;
			}

			.range-slider .input-range {
			  -webkit-appearance: none;
			  width: 200px;
			  height: 10px;
			  border-radius: 5px;
			  background: #ccc;
			  outline: none;
			}

			.range-slider .input-range::-webkit-slider-thumb {
			  -webkit-appearance: none;
			  width: 16px;
			  height: 16px;
			  border-radius: 50%;
			  background: #59666b;
			  cursor: pointer;
			  -webkit-transition: background .15s ease-in-out;
			  transition: background .15s ease-in-out;
			}

			.range-slider .input-range::-webkit-slider-thumb:hover {
			  background: #0084FF;
			  box-shadow: inset 0 0 0 4px #59666b;
			  -webkit-transform: scale(1.1);
			  transform: scale(1.1);
			}

			.range-slider .input-range:active::-webkit-slider-thumb {
			  background: #0084FF;
			  box-shadow: inset 0 0 0 4px #59666b;
			  -webkit-transform: scale(1.1);
			  transform: scale(1.1);
			}

			.range-slider .input-range::-moz-range-thumb {
			  width: 16px;
			  height: 16px;
			  border: 0;
			  border-radius: 50%;
			  background: #59666b;
			  cursor: pointer;
			  -webkit-transition: background .15s ease-in-out;
			  transition: background .15s ease-in-out;
			}

			.range-slider .input-range::-moz-range-thumb:hover {
			  background: #0084FF;
			  box-shadow: inset 0 0 0 4px #59666b;
			  -webkit-transform: scale(1.1);
			  transform: scale(1.1);
			}

			.range-slider .input-range:active::-moz-range-thumb {
			  background: #0084FF;
			  box-shadow: inset 0 0 0 4px #59666b;
			  -webkit-transform: scale(1.1);
			  transform: scale(1.1);
			}

			.range-slider .range-value {
			  display: inline-block;
			  position: relative;
			  width: 60px;
			  color: #fff;
			  font-size: 16px;
			  line-height: 20px;
			  text-align: center;
			  border-radius:...

JavaScript

$(document).ready(function() {
$("input.rangeSplit[type=range]")
  $("input.input-range[type=range]").on('mousemove change', function() {
    value1 = $(this).val();
    min = $(this).attr('min');
    max = $(this).attr('max');
    range = max - min;
    value2 = range - value1;
    value2 = parseFloat(value2.toFixed(2));
    $(this).prev().val(value2);
    $(this).next().val(value1);
  });
  $("[type=range]").change();
});