How to style input type="range" [duplicate]

Question

I'm kinda struggling at styling this element. I've never done it before and I can't really find solution to my problem.

I just want to add border-radius to edges, add some box-shadow to that dot ,which is dragable and main reason why I'm asking is ,how to add that lower opacity to side which is not selected yet.

I don't know if it has to be done by Javascript ,or I can simply do it with css but my problem is :

This is how my range looks now

My goal is this

Since I've never styled this element before ,all of this css is from multiple articles ,which I've found on Google. Is there anything for this like background:active and background:unactive ?

Thanks.

.container{
  background-color:red;
  width:30%;
  padding:1em;
  text-align:center;
}

input[type="range"]{
    width: 100%;
}

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: .35em;
    background: white;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 1.1em;
    width: 1.1em;
    border-radius: 50%;
    background: white;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

<div class="container">
  <div className="range">
      <p className="heading">HEIGHT</p>
       <input type="range"></input>

       <p className="heading">WEIGHT</p>
       <input type="range"></input>
  </div>
</div>

Answer 1

please try this.. And give transitions in css for more attractive

function rangeValFunc(rangeVal){
  var rangeWidth = document.getElementById("tooltiptext").textContent = rangeVal+"cm";
  document.getElementById("tooltiptext").style.left = "calc("+rangeVal+"% - 50px)";
}

.container {
  background:#eb6c5b;
  padding:20px;
}
input[type="range"]{
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  outline: none !important;
  appearance:none;
  border:none;
  border-radius:30px;
}
input[type="range"]::-moz-focus-outer {
    border: 0;
}
input[type="range"]:hover {
  outline:none;
}

/* Chrome */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 9px;
  height: 9px;
  background: #4CAF50;
  cursor: pointer;
  border-radius:30px;
  outline:none;
}

/* Moz */

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #f1f9f4;
  cursor: pointer;
  border-radius:50%;
  border:none;
  outline:none;
}
input[type="range"]::-moz-range-progress {
  background-color: #fff;
    height: 100%;
  border-radius:30px;
  border:none;
}
input[type="range"]::-moz-range-track {  
  background-color: #ccc;
  border-radius:30px;
  border:none;
    height: 100%;
}

/* IE*/

input[type="range"]::-ms-fill-lower {
  background-color: #fff;
    height: 100%;
  border-radius:30px;
  border:none;
}
input[type="range"]::-ms-fill-upper {  
  background-color: #ccc;
  border-radius:30px;
  border:none;
    height: 100%;
}

/* tooltip style */
.tooltip {
  position:relative;
  padding:30px 0;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: #f38080;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top:-5px;
  left:calc(50% - 50px);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f38080 transparent transparent transparent;
}

<div class="container">
  <div class="tooltip">
    <span class="tooltiptext" id="tooltiptext">50cm</span>
  <input type="range" min="0" max="100" value="50" class="slider" id="myRange" onchange="rangeValFunc(this.value);">
  </div>
</div>