How to Customize Range Slider?-CodePudding

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}
        />

CodePudding user response：

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

CodePudding user response：

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;
}