1

How to change the color of the range bar on the left side of the cursor? enter image description here

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx

React.js

              <input className="range-input" type="range" name="speed" min="0" max="100" 
              value={brightness_value} onChange={handleSliderChange}></input>

App.css

.range-input {
  -webkit-appearance: none; 
  appearance: none;
  cursor: pointer; 
  background: white;
  height: 14px; 
  width: 100%; 
  border-radius: 10px; 
  outline: 0; 
}

.range-input::-webkit-slider-thumb  {
  -webkit-appearance: none; 
  background: white; 
  width: 24px; 
  height: 24px;
  border-radius: 50%; 
  cursor: pointer; 
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); 
}
  • 3
    did you check this? https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider – MadJoRR Sep 21 '22 at 07:49
  • This link explains how to style range input in detail: https://nikitahl.com/style-range-input-css – Inaara Kalani Sep 21 '22 at 07:53
  • Thank you but the cursor is hidden in bar... –  Sep 21 '22 at 09:51
  • 1
    Does this answer your question? [How to style HTML5 range input to have different color before and after slider?](https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider) – jsejcksn Sep 21 '22 at 09:53
  • No. The problem is the cursor is hidden in bar. –  Sep 21 '22 at 10:33

0 Answers0