Rang ToolTips

https://dlilb.com

by Dmitry Khmil

HTML

<div class="itemdetail rnge">
		<span>Time</span>
		
		<div class="range-slider">
			<span id="rs-bullet" class="rs-label times">8</span>
			<input id="rs-range-line" class="rs-range" type="range" value="8" min="8" max="22" />
			<output id="outputvalue"></output>
		</div>
	</div>

CSS

.range-slider {
    margin: 50px 5%;
    width: 90%;
}

.rs-range {
  margin-top: 29px;
  width: 100%;
  -webkit-appearance: none;
}
.rs-range:focus {
  outline: none;
}
.rs-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  backdround:linear-gradient(90deg, rgb(214,214,214) 60%, rgb(214,214,214));
  border-radius: 0px;
  border: 0px solid #010101;
}
.rs-range::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #ffffff;
  border-radius: 0px;
  border: 0px solid #010101;
}
.rs-range::-webkit-slider-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
  width: 68px;
  height: 32px;
  border-radius: 32px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -16px;
  z-index: 1;
	position: relative;
}
.rs-range::-moz-range-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  width: 68px;
  height: 32px;
  border-radius: 22px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -16px;
  z-index: 1;
	position: relative;
}
.rs-range::-moz-focus-outer {
  border: 0;
}

.rs-label {
    position: relative;
    transform-origin: center center;
    display: block;
    width: 68px;
    height: 32px;
    background: #141320;
    border-radius: 32px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #fff;
    margin: 0 0 -45px 2px;
    left: attr(value);
    color: #fff;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 17px;
    z-index: 0;
}
.rs-label.times::after {
    content: ":00";
    font-size: 17px;
    letter-spacing: 0.07em;
    margin: 0;
    float: none;
    display: inline-block;
}

JavaScript

var rangeSlider = document.getElementById("rs-range-line"); //полоска
var rangeBullet = document.getElementById("rs-bullet"); //ползунок
var outputvalue = document.getElementById("outputvalue"); //ползунок

outputvalue.innerHTML = rangeSlider.value;
	
rangeSlider.addEventListener("input", showSliderValue, false);



function showSliderValue() {
  rangeBullet.innerHTML = rangeSlider.value;
  outputvalue.innerHTML = this.value;
  var bulletPosition = (rangeSlider.value /rangeSlider.max);

//var width = document.body.clientWidth * 0.9 * 0.66;


//rangeBullet.style.left = ((bulletPosition * width) - 70) + "px";
var ddd = (this.value - 7) * (100 / (22 - 8));
console.log(this.value);
rangeBullet.style.left = ddd + 'px';
	
var x = (rangeSlider.value/rangeSlider.max*100);
var colors = 'linear-gradient(90deg, rgb(121,77,246)' + x + '%, rgb(214,214,214)' + x + '%)';
rangeSlider.style.background = colors;
	
}