How to Change the Bootstrap 4 Range Slider Colors

How can I change the Bootstrap 4 range slider colors?

Try the following code - various vendor-specific classes, use depending on your requirement needs:

.custom-range::-webkit-slider-thumb {
  background: gray;
}

.custom-range::-moz-range-thumb {
  background: gray;
}

.custom-range::-ms-thumb {
  background: gray;
}

Per comments by Astariul and aliawadh980, change the shadow that occurs when the thumb is clicked like this:

-webkit-slider-thumb:active {
    background-color: red;
}
-webkit-slider-thumb,
.custom-range:focus::-webkit-slider-thumb, 
.custom-range:focus::-moz-range-thumb,
.custom-range:focus::-ms-thumb {
    box-shadow: red;
}

how to change the react-bootsrap-range-slider color?

If you can use pure css solution, then using this will override the color of the circle of the slider

input[type="range"]::-webkit-slider-thumb {
  background: red !important;
}

/* All the same stuff for Firefox */
input[type="range"]::-moz-range-thumb {
  background: red !important;
}

/* All the same stuff for IE */
input[type="range"]::-ms-thumb {
  background: red !important;
}

How to style HTML5 range input to have different color before and after slider?

Pure CSS solution:

• Chrome: Hide the overflow from input[range], and fill all the space left to
  thumb with shadow color.
• IE: no need to reinvent the wheel: ::-ms-fill-lower
• Firefox no need to reinvent the wheel: ::-moz-range-progress

/*Chrome*/@media screen and (-webkit-min-device-pixel-ratio:0) {    input[type='range'] {      overflow: hidden;      width: 80px;      -webkit-appearance: none;      background-color: #9a905d;    }        input[type='range']::-webkit-slider-runnable-track {      height: 10px;      -webkit-appearance: none;      color: #13bba4;      margin-top: -1px;    }        input[type='range']::-webkit-slider-thumb {      width: 10px;      -webkit-appearance: none;      height: 10px;      cursor: ew-resize;      background: #434343;      box-shadow: -80px 0 0 80px #43e5f7;    }
}/** FF*/input[type="range"]::-moz-range-progress {  background-color: #43e5f7; }input[type="range"]::-moz-range-track {    background-color: #9a905d;}/* IE*/input[type="range"]::-ms-fill-lower {  background-color: #43e5f7; }input[type="range"]::-ms-fill-upper {    background-color: #9a905d;}

<input type="range"/>

change color of ion range-slider handle

The background is an image (https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/img/sprite-skin-flat.png), so you cannot simply change the color. You can consider a gradient to create a similar image with the color you want. Since it's a simple line it should be easy.

$(".js-range-slider").ionRangeSlider({  type: "single",  min: 0,  max: 1000,  from: 200,  to: 500,  grid: true});

.irs-slider.single {  background: linear-gradient(blue, blue) center/2px 100% no-repeat;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.css"><input type="text" class="js-range-slider" name="my_range" value="" />

Range input refuses to change background color and height

Try to add this :

.slider::-webkit-slider-runnable-track {
  background: red;
}

.slider::-moz-range-track {
  background: red;
}

.slider::-ms-track {
  background: red;
}

Look at this site for more customizations : http://danielstern.ca/range.css

---

Related Topics