title: Change Bootstrap range slider color to Hex color?
body: <p>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 <a href="https://jsfiddle.net/rfuqmnh9/2/" rel="nofollow noreferrer">fiddle</a> 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?</p>
  <p>Here is my html code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
      &lt;!--  Age Range Slider  --&gt;
      &lt;div class="col"&gt;
        &lt;div class="card mb-3" style="max-width: 21rem;"&gt;
          &lt;div class="card-body text-center"&gt;
            &lt;div class="d-flex flex-column"&gt;
              &lt;label for="age_slider" class="form-label"&gt; Age&lt;/label&gt;
              &lt;input class="slider" name="age_slider" id="age_slider" type="range" value="30" max="100" min="1" oninput="this.nextElementSibling.value = this.value"&gt;
              &lt;output&gt;30&lt;/output&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've been flagged as having a similar question to the one <a href="https://stackoverflow.com/questions/56424105/how-can-i-change-the-bootstrap-4-range-slider-colors">here</a>, but the answer provided in that question is not working for me either.</p>