I’m looking to change the default blue color of a Bootstrap range slider, but I’m not sure if that’s possible. Here is the fiddle of what I have so far. Ideally I’d like to change this to a Hex color, like red. Can this be done with something simple like CSS?
Here is my html code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<!-- Age Range Slider -->
<div class="col">
<div class="card mb-3" style="max-width: 21rem;">
<div class="card-body text-center">
<div class="d-flex flex-column">
<label for="age_slider" class="form-label"> Age</label>
<input class="slider" name="age_slider" id="age_slider" type="range" value="30" max="100" min="1" oninput="this.nextElementSibling.value = this.value">
<output>30</output>
</div>
</div>
</div>
</div>
I’ve been flagged as having a similar question to the one here, but the answer provided in that question is not working for me either.
2
Answers
You can use this properties:
but they are not too functional
Chrome
Firefox