CODEWITHSUNDEEP
css
Serio
Serio

Reputation: 527

How to style correctly input type range?

I came up with such a way to style the input type="range" through a linear-gradient, but when the variable is set to 75%, it is not behaving correctly, how can I fix it?

body{
background: green;
}
.wrapper {
      width: 20vmin;
      }

      input {
        width: 100%;
        --litters-range: 75%;

        appearance: none;
        outline: none;
        height: 1vmin;
        border-radius: 0.5vmin;
        background: linear-gradient(
          to left,
          rgba(87, 87, 87, 0.46) calc(100% - var(--litters-range)),
          white var(--litters-range)
        );
        }
        input::-webkit-slider-thumb {
          cursor: pointer;
          appearance: none;
          width: 2vmin;
          height: 2vmin;
          background: white;
          border-radius: 50%;
        }
      
    // 25% works correctly but 75% not
 <div class="wrapper">
        <input type="range" />
      </div>

Upvotes: 2

Views: 2038

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106068

You are making a mistake with your stop/start value, they could be the same and be set from left to right.

Also, you need to update that var() via javaScript, CSS cannot do it for you.

Possible example (use console.log() to check what happens) then remove or comment it):

var val = document.querySelector('.wrapper input[type="range"]');
let range = val.value;

val.addEventListener("input", function() { // onchange ...
  let range = val.value + '%';
  console.log(range);
  val.style.setProperty("--litters-range", range);
});
body {
  background: green;
}

.wrapper {
  width: 20vmin;
}

input {
  width: 100%;
  --litters-range: 75%;
  appearance: none;
  outline: none;
  height: 1vmin;
  border-radius: 0.5vmin;
  background: linear-gradient( to right, white var(--litters-range), rgba(87, 87, 87, 0.46) var(--litters-range));
}

input::-webkit-slider-thumb {
  cursor: pointer;
  appearance: none;
  width: 2vmin;
  height: 2vmin;
  background: white;
  border-radius: 50%;
}
<div class="wrapper">
  <input type="range" value="75" />
</div>

Upvotes: 2

Dibash Sapkota
Dibash Sapkota

Reputation: 665

I would do like this

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .slidecontainer {
      width: 100%;
    }
    
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    
    .slider:hover {
      opacity: 1;
    }
    
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 23px;
      height: 24px;
      border: 0;
      background-color: black;
      cursor: pointer;
      border-radius: 50%;
    }
    
    .slider::-moz-range-thumb {
      width: 23px;
      height: 24px;
      border: 0;
      background: url('contrasticon.png');
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h1>Range Slider</h1>

  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    <p>Value: <span id="demo"></span></p>
  </div>

  <script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    slider.oninput = function() {
      output.innerHTML = this.value;
    }
  </script>

</body>

</html>

Upvotes: 0

Related Questions