'How to Customize Range Slider?

https://hrx66w.csb.app/ How to customize styles for this slider selected range color & pointer color ?

 <input
          ref={this.inputRef}
          id="sliderId"
          className="inputR w-100"
          name="sliderName"
          type="range"
          min={minValue}
          max={maxValue}
          value={this.state.value}
          onChange={this.handleChange(minValue, maxValue)}
          style={styleInput}
        />
javascriptcssreactjs


Solution 1:[1]

Use accent-color in your css file

// Example

.inputR {
  accent-color: red;
}

This is good for styling inputs type range, checkbox, radio and progress.

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

Solution 2:[2]

From your example, I can say that the style you have applied is overridden by browser. To counter that, you should reset all styles for the slider before any customization. You can add this to your styles.

.inputR {
  -webkit-appearance: none;
}
 
.inputR:focus {
  outline: none;
}

.inputR::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 50%;
  background: rgba(179, 35, 179, 0.75);
  height: 16px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Madhan S

Related Questions