title: Jquery Range Slider - Low Fill Section - How to Fill with Background-Color
body: <p>I created this range slider, and i would like to fill the "lower" section of the slider with a green color similar to the blue in the example picture.  </p>
  
  <p>I've tried every technique i could find on the web. I read that Internet Explorer supports code for this sort of thing, but most modern browsers will need a hack to achieve this affect. I tried a gradient technique but it seemed a little too hacky for me. Nothing i try sticks.</p>
  
  <p>Does anybody know a simple way to fill the lower fill section? There has to be a way-</p>
  
  <p><a href="https://codepen.io/stinkytofu3311/pen/GmKxoW" rel="nofollow noreferrer">https://codepen.io/stinkytofu3311/pen/GmKxoW</a></p>
  
  <p><a href="https://i.stack.imgur.com/NsUm9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NsUm9.jpg" alt="enter image description here"></a></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-js lang-js prettyprint-override"><code> var sizeRange = ["11x17 - Starting Price &lt;span&gt;- $19.99&lt;/span&gt;", // Store string inside of an Array
  
          "24x36 - Starting Price &lt;span&gt;- $29.99&lt;/span&gt;",
  
          "70x90 - Starting Price &lt;span&gt;- $39.99&lt;/span&gt;",
  
          "120x50 - Starting Price &lt;span&gt;- $49.99&lt;/span&gt;",
  
          "67x18 - Starting Price &lt;span&gt;- $59.99&lt;/span&gt;",
  
          "19x30 - Starting Price &lt;span&gt;- $69.99&lt;/span&gt;"]
  
  
  var imageUrl = new Array(); // Store images inside of an Array
  
          imageUrl[0] = 'http://svgshare.com/i/1Ak.svg';
  
          imageUrl[1] = 'http://svgshare.com/i/1AQ.svg';
  
          imageUrl[2] = 'http://svgshare.com/i/1Bb.svg';
  
          imageUrl[3] = 'http://svgshare.com/i/1Am.svg';
  
          imageUrl[4] = 'http://svgshare.com/i/1CG.svg';
  
          imageUrl[5] = 'http://svgshare.com/i/1By.svg';
  
  
  $('#sliderPrice').html( sizeRange[0] );
  
  $(document).on('input change', '#range-slider', function() { //Listen to slider changes (input changes)
      var v=$(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL])
    
     $('#sliderStatus').html( $(this).val() );
     $('#sliderPrice').html( sizeRange[v] );
    
    $("#img").prop("src", imageUrl[v]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL[v] to display image
  });
  
  // ::::: Range Slider Thumb ::::: //
  
  $("#range-slider").on("mousedown", function() { //1. When user clicks their mouse down on the Range-Slider
      $(this).removeClass().addClass("thumb-down");//1.1 Remove default class from CSS, and add the class .thumb-down (changes background color)
      $(this).addClass("hover-ring");//1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color)
  });
  
  $("#range-slider").on("mouseup", function() { //2. When user mouse-up on Range-Slider
    
      $(this).addClass("thumb-up"); //2.1 Changes thumb color back to light green
    
      $(this).addClass("hover-ring-out"); //2.2 Removes Box-Shadow
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Roboto');
  
  .product-range-wrapper {
    displat: -webkit-flex;
    displat:flex;
    -webkit-flex-direction: column;
    flex-direction:column;
    max-width:600px;
    margin:0px auto;
    /*outline: 1px solid purple;*/
   }
  .product-range-block {
    display: -webkit-flex;
    display:flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width:100%;
    height:100%;
    /*outline: 1px solid red;*/
  }
  .ref-height-block {
    flex-grow:3;
    /*background-color:red;*/
  }
  .size-chart-block {
    flex-grow:9;
    /*background-color:green;*/
  }
  .product-range-block img {
    width:90%;
    /*outline: 1px solid blue;*/
  }
  #img {
    width: 100% !important;
  }
  
  
  /* ::::::::::::::::::::Range Slider Styles::::::::::::::::::::::::: */
  .range-slider-block {
    margin:0px auto;
    width:90%;
    }
  #range-slider {
    padding:40px 0px;
    width:100%;
    /*outline: 1px solid green;*/
  }
  /* Remove Range Sliders Default Styles*/
  input[type=range]{
      -webkit-appearance: none;
  }
  /* Track */
  input[type=range]::-webkit-slider-runnable-track {
      height: 10px;
      background: #d7d7d7;
      border: none;
      border-radius: 6px;
  }
  input[type=range]:focus {
      outline: none;
  }
  /* Thumb */
  input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      background: #46947F;
      margin-top: -9px;
      transition: box-shadow 0.5s;
  }
  input[type=range]:hover::-webkit-slider-thumb {
      box-shadow: 0 0 0 10pt rgba(190,190,190,0.4);
      cursor:pointer;
  }
  
  /* JS Styles */
  /* Changes Thumb color to darker green when mousedownn */
  input[type=range].thumb-down::-webkit-slider-thumb {
    background:#316557;
  }
  /* Changes Thumb color back to light green when mouseup */
  input[type=range].thumb-up::-webkit-slider-thumb {
    background:#46947F;  
  }
  /* Changes Ring color Green */
  input[type=range].hover-ring::-webkit-slider-thumb {
      box-shadow: 0 0 0 6pt rgba(70,148,127,0.46);
      cursor:pointer;
  }
  input[type=range].hover-ring-out::-webkit-slider-thumb {
      box-shadow: 0 0 0 0pt rgba(0,0,0,0);
      cursor:pointer;
  }
  
  /* Input Value Styles */
  #slider_count {
    margin:0px auto;
    width:100%;
    padding:0px 20px;
    text-align:center;
  }
  #sliderPrice {
    font-family: 'Roboto', sans-serif;
    font-size:22px;
    font-weight:600;
  }
  #sliderPrice span {
    font-weight:600;
    color:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
  
  &lt;div class="product-range-wrapper"&gt;
    
    &lt;div class="product-range-block"&gt;
      &lt;div class="ref-height-block"&gt;
        &lt;img src="http://svgshare.com/i/1Ba.svg" alt="Product Height Refrence" height="" width=""&gt;
      &lt;/div&gt;
      &lt;div class="size-chart-block"&gt;
        &lt;img src="http://svgshare.com/i/1Ak.svg" style='' id='img'/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div id="slider_count"&gt;&lt;span id="sliderPrice"&gt;0&lt;/span&gt;&lt;/div&gt;
    &lt;div class="range-slider-block"&gt;
      &lt;input type="range" id="range-slider" value="0.0" min="0" max="5" step="1" /&gt;
    &lt;/div&gt;
    
    
  &lt;/div&gt;
  
  &lt;div id="slider_count"&gt;Slider Value = &lt;span id="sliderStatus"&gt;0&lt;/span&gt;&lt;/div&gt;
  &lt;br/&gt;</code></pre>
  </div>
  </div>
  </p>