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

Unusual shadow cast by the box's silhouette

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

Issues with displaying images in CSS when using HTML 5 canvas drawing

Detecting Android devices

Data input not populating in email

Guide to creating a dynamic amount of slides in a React carousel for optimal responsiveness

Toggle the visibility of HTML elements by utilizing a JavaScript checkbox event

My website has a navbar button that is not directing to the intended section of the screen

Ensure the Next/Image component fits neatly inside a div without distorting its aspect ratio, and keep the

How to apply custom styling to a specific element within an Angular Material 2 component using CSS based on its Id or

Changing the color of placeholder text in MUI 5 TextField

showcase every value upon submission in the form with options to edit and delete

When it comes to @font-face, Chrome has no trouble detecting the font, but an issue

disable full page scrolling on iOS devices

I must create text that is transparent against a colorful gradient background

A step-by-step guide on using Jquery to fade out a single button

What is the CSS/HTML code to position text at the bottom of an image overlay in a card design?

Automatically remove the entered data

Ensuring DIV Fills without Compromising Aspect Ratio

Is the background color not being implemented?