How to style input type="range"

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>

so you would change the style depending on the slider value ? that is probably easier in javascript — user3732793, Aug 13 '20 at 10:06

Rayees AC · Answer 1 · 2020-08-13T11:36:40.677

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>

Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what this code does and how it answers the question, so that it is useful to the OP as well as other users also with similar issues. — FluffyKitten, Aug 13 '20 at 15:29
@Pinnci can you want to show tooltip in slider to change value? — Rayees AC, Aug 22 '20 at 09:04

How to style input type="range"

1 Answers1

Linked