Project Lima pattern lib

Range 

<div class="b-form__group">
    <label class="b-form__label" for="test-range">Input type="range"</label>
    <div class="b-form__range-container">
        <input class="b-form__range-input js-range-input" type="range" id="testRange" name="testRange" min="0" max="20000" value="0" autocomplete="off">
        <output class="b-form__range-output" id="testRangeOutput" name="testRangeOutput">0</output>
    </div>
    <span class="b-form__message"></span>
</div>
 
<div class="b-form__group">
    <label class="b-form__label" for="test-range">Input type="range"</label>
    <div class="b-form__range-container">
        <input class="b-form__range-input js-range-input" type="range" id="testRange" name="testRange" min="0" max="20000" value="0" autocomplete="off">
        <output class="b-form__range-output" id="testRangeOutput" name="testRangeOutput">0</output>
    </div>
    <span class="b-form__message"></span>
</div>
 
/* No context defined for this component. */

This element is a cross browser styled range slider, it comes from: https://github.com/darlanrod/input-range-scss . The styles are controlled through SCSS variables, which can be seen in the master vars file.