Applying Lower/Upper Fill to an "input range" with Min and Max Values in Chrome

Question

I plan to make a slider that moves the minimum value 1 and the maximum value 5 step by step.

Below is the figure of the slider I am looking for.

Processed through the -ms-fill-lower, -ms-fill-upper attributes in IE, and through the -moz-range-progress attributes in Firefox. However, chromium does not support the attributes described above.

First, I figured out how to apply gradation overlay to the -webkit-slider-runnable-track by value. but I found a phenomenon in which gradations were visible out of the domain at 25 percent and 75 percent.

How can I apply lower fill/upper fill in chrome?

code

.range{
    width:96px;
    -webkit-appearance:none;
    background-color:transparent;
}
.range:focus{
    outline:none;
}
.range::-webkit-slider-thumb{
    -webkit-appearance:none;
    display:inline-block;
    width:14px;
    height:14px;
    background-color:red;
    border-radius:50%;
    position:relative;
    bottom:6px;
    cursor:pointer;
}

.range::-webkit-slider-runnable-track {
    width:100%;
    height: 3px;
    background-color:blue;  
    border: none;
    cursor:pointer;
}

.range:focus::-webkit-slider-runnable-track{
    background-color:blue;
}

<div>
  <input type="range" step="1" min="1" max="5" class="range">
</div>

score 0 · Accepted Answer · answered Jul 02 '20 at 07:59

We can give the slider a gradient background. Then all we need to do is calculate how much of the input needs to be filled in. The example below can handle all kinds of range values, not just from 1 till 5.

I also changed the colors to match your example.

const slider = document.querySelector(".range");

const adjustSlider = () => {
  const min = slider.min;
  const max = slider.max;
  // Calculate visible width
  const val = ((slider.value - min) * 100) / (max - min);
  
  // Change these variables to the colors you need
  const fillLeft = "#01c1c6";
  const fillRight = "#d4f5f6";
  
  slider.style.background = `linear-gradient(to right, ${fillLeft} ${val}%, ${fillRight} ${val}%`;
};

// Change background if input changes
slider.addEventListener("input", adjustSlider);

// We need to execute it at the start to set the initial value
adjustSlider();

.range{
    width:96px;
    -webkit-appearance:none;
    background-color:transparent;
}
.range:focus{
    outline:none;
}
.range::-webkit-slider-thumb{
    -webkit-appearance:none;
    display:inline-block;
    width:14px;
    height:14px;
    background-color:#01c1c6;
    border-radius:50%;
    position:relative;
    bottom:6px;
    cursor:pointer;
}

.range::-webkit-slider-runnable-track {
    width:100%;
    height: 3px;
    border: none;
    cursor:pointer;
}

<div>
  <input type="range" step="1" min="1" max="5" class="range">
</div>

Applying Lower/Upper Fill to an "input range" with Min and Max Values in Chrome

1 Answers1