Tips for properly styling the input type range element

Question

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly.

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>

css

Answer 1

Answer №1

Your stop/start values should be aligned, as they can both be set from left to right.

Remember, you'll need to update that var() using JavaScript since CSS alone won't do the job for you.

Here's a potential example (use console.log() to see the results) and then either remove or comment it:

var element = document.querySelector('.container input[type="range"]');
let rangeValue = element.value;

element.addEventListener("input", function() { // onchange ...
  let rangeValue = element.value + '%';
  console.log(rangeValue);
  element.style.setProperty("--progress-range", rangeValue);
});

body {
  background: blue;
}

.container {
  width: 30vmin;
}

input {
  width: 90%;
  --progress-range: 50%;
  appearance: none;
  outline: none;
  height: 1.5vmin;
  border-radius: 0.7vmin;
  background: linear-gradient( to right, white var(--progress-range), rgba(128, 128, 128, 0.6) var(--progress-range));
}

input::-webkit-slider-thumb {
  cursor: pointer;
  appearance: none;
  width: 2.5vmin;
  height: 2.5vmin;
  background: white;
  border-radius: 50%;
}

<div class="container">
  <input type="range" value="50" />
</div>

Answer 2

Your stop/start values should be aligned, as they can both be set from left to right.

Remember, you'll need to update that var() using JavaScript since CSS alone won't do the job for you.

Here's a potential example (use console.log() to see the results) and then either remove or comment it:

var element = document.querySelector('.container input[type="range"]');
let rangeValue = element.value;

element.addEventListener("input", function() { // onchange ...
  let rangeValue = element.value + '%';
  console.log(rangeValue);
  element.style.setProperty("--progress-range", rangeValue);
});

body {
  background: blue;
}

.container {
  width: 30vmin;
}

input {
  width: 90%;
  --progress-range: 50%;
  appearance: none;
  outline: none;
  height: 1.5vmin;
  border-radius: 0.7vmin;
  background: linear-gradient( to right, white var(--progress-range), rgba(128, 128, 128, 0.6) var(--progress-range));
}

input::-webkit-slider-thumb {
  cursor: pointer;
  appearance: none;
  width: 2.5vmin;
  height: 2.5vmin;
  background: white;
  border-radius: 50%;
}

<div class="container">
  <input type="range" value="50" />
</div>

Answer 3

Answer №2

I would follow these steps:

<!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>

Answer 4

I would follow these steps:

<!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>

Tips for properly styling the input type range element

Answer №1

Answer №2

Similar questions

What is the best way to increase the size of this text when an image is hovered over?

Changing the designated materialUI class

Customize the default getstream component styles in a NextJS Component

Jquery deactivates the CSS hover effect

Troubleshooting a problem with HTML table styling

What is causing the additional space at the bottom?

The arrangement of columns is not correctly aligned

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

identify external components based on their internal identifiers

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

There is zero gutter in Bootstrap

What is the best method for flipping the sequence of elements in media queries?

Placing a div within a 960 grid system can sometimes result in unexpected spacing

Issue with margins of sections when attempting to activate menu class while scrolling

What is the process for integrating CSS-styled text into CKEditor?

Adjusting the starting position of text within an HTML <li> element

What is the best way to make a CSS class appear in my javascript using the method I have been using before?

Tips for creating a sub-menu within a dropdown menu

Is there an issue with the JavaScript functionality of the max/min button?

Like button for Facebook located at the bottom of a static webpage