How to display value inside the Range Slider?

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