How to display value inside the Range Slider? - css

Question

range slider design
Hello,
I need help creating this range slider. I need the value to be displayed on or inside the slider, not on a tooltip or bubble over it. And the left side with a different color than the right side.
I have found a way to make the value on the slider but can't apply any style on it!
Any help is very appreciated.
Thank you!

Answer 1

$("document").ready(function() {
$(".slider").rangeslider();
});
$.fn.rangeslider = function(options) {
this.each(function(i, elem) {
var obj = $(elem); // input element
var defautValue = obj.attr("value");
var slider_max = (obj.attr("max"));
var slider_min = (obj.attr("min"));
var slider_step = (obj.attr("step"));
var slider_stop = (slider_max - slider_min) / slider_step;
var step_percentage = 100 / slider_stop;
console.log(step_percentage);
var color = "";
var classlist = obj.attr("class").split(/\s+/);
$.each(classlist, function(index, item) {
if (item.startsWith('slider-')) {
color = item;
}
});
if (color == "") {
color = "slider-blue";
}
if (slider_stop <= 30) {
var i;
var dots = "";
for (i = 1; i < slider_stop; i++) {
dots += "<div class='dot' id='" + i + "' style='left:" + step_percentage * i + "%;'></div>";
}
} else {
var dots = "";
}
obj.wrap("<span class='slider " + color + "'></span>");
obj.after("<span class='slider-container " + color + "'><span class='bar'><span></span>" + dots + "</span><span class='bar-btn'><span>0</span></span></span>");
obj.attr("oninput", "updateSlider(this)");
updateSlider(this);
return obj;
});
};
function updateSlider(passObj) {
var obj = $(passObj);
var value = obj.val();
var min = obj.attr("min");
var max = obj.attr("max");
var range = Math.round(max - min);
var percentage = Math.round((value - min) * 100 / range);
var nextObj = obj.next();
var btn = nextObj.find("span.bar-btn");
if (value == min) {
nextObj.find("span.bar-btn").css("left", percentage + "%");
} else if (value == max) {
nextObj.find("span.bar-btn").css("left", "calc(" + percentage + "% - " + btn.width() + "px");
} else {
nextObj.find("span.bar-btn").css("left", "calc(" + percentage + "% - " + btn.width() / 2 + "px");
}
nextObj.find("span.bar > span").css("width", percentage + "%");
nextObj.find("span.bar-btn > span").text(value);
};
body {
font-family: Calibri;
background-image: linear-gradient(90deg, #691337, #613374, #133742);
}
.heading {
text-align: center;
color: #fff;
}
.wrap {
margin: 25px;
background: #133742;
border-radius: 7.5px;
padding: 5px 0px 20px 53px;
}
/* SLIDER-STYLES */
.slider-orange>.bar>span {
transition: 0.3s;
background: #ff821e!important;
}
.slider-orange>.bar-btn {
background: #ff821e!important;
border: 2px solid #ffbf8c !important;
transition: 0.3s;
}
.slider-orange:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #ff821e;
color: #ff821e;
background: #fff !important;
border: 2px solid #ff821e !important;
}
.slider-red>.bar>span {
transition: 0.3s;
background: #eb0041!important;
}
.slider-red>.bar-btn {
background: #eb0041!important;
border: 2px solid #f9b2c6 !important;
transition: 0.3s;
}
.slider-red:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #eb0041;
color: #eb0041;
background: #fff !important;
border: 2px solid #eb0041 !important;
}
.slider-green>.bar>span {
transition: 0.3s;
background: #00965a!important;
}
.slider-green>.bar-btn {
background: #00965a!important;
border: 2px solid #b2dfcd !important;
transition: 0.3s;
}
.slider-green:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #00965a;
color: #00965a;
background: #fff !important;
border: 2px solid #00965a !important;
}
.slider-yellow>.bar>span {
transition: 0.3s;
background: #ffd200!important;
}
.slider-yellow>.bar-btn {
background: #ffd200!important;
border: 2px solid #fff1b2 !important;
transition: 0.3s;
}
.slider-yellow:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #ffd200;
color: #1d1d1b;
background: #fff !important;
border: 2px solid #ffd200 !important;
}
.slider-cyan>.bar>span {
transition: 0.3s;
background: #00b4e6!important;
}
.slider-cyan>.bar-btn {
background: #00b4e6!important;
border: 2px solid #b2e8f7 !important;
transition: 0.3s;
}
.slider-cyan:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #00b4e6;
color: #00b4e6;
background: #fff !important;
border: 2px solid #00b4e6 !important;
}
.slider-blue>.bar>span {
transition: 0.3s;
background: #0014a0!important;
}
.slider-blue>.bar-btn {
background: #0014a0!important;
border: 2px solid #0014a0 !important;
transition: 0.3s;
}
.slider-blue:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #0014a0;
color: #0014a0;
background: #fff !important;
border: 2px solid #0014a0 !important;
}
.dot {
width: 7px !important;
height: 7px;
background: #fff;
display: block;
position: absolute;
border-radius: 125%;
top: 2px;
}
.slider {
display: inline-block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.slider>input {
opacity: 0;
width: 100%;
height: 40px;
position: relative;
z-index: 5;
-webkit-appearance: none;
}
.slider>input::-webkit-slider-thumb {
-webkit-appearance: none;
z-index: 100;
position: relative;
width: 50px;
height: 30px;
-webkit-border-radius: 10px;
}
.slider>span.slider-container {
min-height: 40px;
display: inline-block;
position: absolute;
top: 0;
left: -8px;
right: 46px;
z-index: 3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slider>span.slider-container>span.bar {
background-color: #dadada;
display: inline-block;
position: absolute;
z-index: 1;
left: 0;
right: 0;
height: 11px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
top: 50%;
transform: translateY(-50%);
}
.slider>span.slider-container>span.bar>span {
background: #00965b;
display: inline-block;
float: left;
height: 11px;
width: 0%;
}
.slider>span.slider-container>span.bar-btn {
display: inline-block;
position: absolute;
min-width: 55px;
max-width: 100px;
height: 32px;
font-weight: bold;
text-align: center;
background: #00965b;
left: 0;
top: 50%;
border-radius: 100px;
border: 2px solid #dadada;
z-index: 5;
color: #fff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform: translateY(-50%);
}
.slider>span.slider-container>span.bar-btn>span {
position: relative;
position: absolute;
tlef: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="wrap">
<h1 class="heading">Simple Rangeslider</h1>
<input class="slider" value="0" min="3" max="5" step="1" name="001" type="range" />
<input class="slider slider-orange" value="0" min="0" max="25" step="1" name="002" type="range" />
<input class="slider slider-red" value="3556" min="0" max="3556" step="34" name="003" type="range" />
<input class="slider slider-green" value="0" min="0" max="34" step="4" name="004" type="range" />
<input class="slider slider-yellow" value="0" min="0" max="5" step="1" name="005" type="range" />
<input class="slider slider-cyan" value="5" min="0" max="100" step="2" name="006" type="range" />
<input class="slider slider-blue" value="0" min="0" max="5" step="1" name="007" type="range" />
</div>
HI go through this if need any kind of customization in range slider.
Source Codepen