mixin OverviewText
  p.mb-0.mt-2 Create custom 
    code input type="range"
    |  controls with 
    code .form-range
    | . The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

mixin ExampleRange
  label.form-label(for='customRange1') Example range
  input#customRange1.form-range(type='range')

mixin MinMaxtext
  p.mb-0.mt-2 Range inputs have implicit values for 
    code min
    |  and 
    code max
    | —
    code 0
    |  and 
    code 100
    | , respectively. You may specify new values for those using the 
    code min
    |  and 
    code max
    |  attributes.

mixin MinMaxrange
  label.form-label(for='customRange2') Example range
  input#customRange2.form-range(type='range', min='0', max='5')


mixin StepsText
  p.mb-0.mt-2 By default, range inputs “snap” to integer values. To change this, you can specify a 
    code step
    |  value. In the example below, we double the number of steps by using 
    code step="0.5"
    | .

mixin StepsRange
  label.form-label(for='customRange3') Example range
  input#customRange3.form-range(type='range', min='0', max='5', step='0.5')