title: Circles on start and end of range slider
body: <p>i want to make a range slider with some design in it. I have no idea how to stylize the input. <a href="http://prntscr.com/ebyoev" rel="nofollow noreferrer">http://prntscr.com/ebyoev</a> like this one
  The thing i want to do is, i dont know how to implement the circles on the start and end of the range slider and how to stylize the current circle range</p>
  
  <p><a href="https://jsfiddle.net/agghvm9t/" rel="nofollow noreferrer">https://jsfiddle.net/agghvm9t/</a> this is the fiddle </p>
  
  <p>This is how far i have come</p>
  
  <pre><code>&lt;div class="range-slider"&gt;
    &lt;input class="range-slider__range" type="range" value="100" min="0" max="500"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my css</p>
  
  <pre><code> *, *:before, *:after {
    box-sizing: border-box;
  }
  
  body {
    font-family: sans-serif;
    padding: 60px 20px;
  }
  @media (min-width: 600px) {
    body {
      padding: 60px;
    }
  }
  
  .range-slider {
    margin: 60px 0 0 0%;
  }
  
  .range-slider {
    width: 100%;
  }
  
  .range-slider__range {
    -webkit-appearance: none;
    width: calc(100% - (73px));
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
  }
  .range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
  }
  .range-slider__range::-webkit-slider-thumb:hover {
    background: #1abc9c;
  }
  .range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c;
  }
  .range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
  }
  .range-slider__range::-moz-range-thumb:hover {
    background: #1abc9c;
  }
  .range-slider__range:active::-moz-range-thumb {
    background: #1abc9c;
  }
  
  .range-slider__value {
    display: inline-block;
    position: relative;
    width: 60px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #2c3e50;
    padding: 5px 10px;
    margin-left: 8px;
  }
  .range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: '';
  }
  
  ::-moz-range-track {
    background: #d7dcdf;
    border: 0;
  }
  
  input::-moz-focus-inner,
  input::-moz-focus-outer {
    border: 0;
  }
  </code></pre>
  
  <p>THis is my jquery</p>
  
  <pre><code>    var rangeSlider = function(){
    var slider = $('.range-slider'),
        range = $('.range-slider__range'),
        value = $('.range-slider__value');
  
    slider.each(function(){
  
      value.each(function(){
        var value = $(this).prev().attr('value');
        $(this).html(value);
      });
  
      range.on('input', function(){
        $(this).next(value).html(this.value);
      });
    });
  };
  
  rangeSlider();
  </code></pre>