Change Bootstrap range slider color to Hex color?-CodePudding

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.

CodePudding user response：

You can use this properties:

.slider {
  -webkit-appearance: none;
  width: 100;
  margin: 50px auto;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: yellow;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: red;
  overflow: visible;
  cursor: pointer;
}

but they are not too functional

CodePudding user response：

Chrome

.slider::-webkit-slider-runnable-track {
  background-color: #ccc;
}

.slider::-webkit-slider-thumb {
  background-color: #333333;
}

Firefox

.slider::-moz-range-track {
  background-color: #cccccc;
}

.slider::-moz-range-thumb {
  background-color: #333333;
}