skip to Main Content

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


  1. 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

    Login or Signup to reply.
  2. 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;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search