How to style input type="range"

user_12479443 0
Viewed 13450

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

enter image description here

My goal is this

enter image description here

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>

input css html
1 Answers

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>

user_133686580
Related