Range
The range allows users to input a numeric value from a given range.
Details
Provides a styled native range input.
The flix-range__track-range shows the range progress and you need to update the left and right properties accordingly using JavaScript.
Modifiers:
--small- Renders a smaller version of the range input.
--disabled- Add this modifier to the wrapper and a `disabled` attribute to the input to disable it.
--double- Allows for "inner range" where the user can specify a start and end. See more details bellow.
<div class="flix-form-row">
<div class="flix-range">
<label class="flix-range__label" for="simple-range">Simple range:</label>
<span class="flix-range__value" id="simple-range-valuetext">Value: 2</span>
<div class="flix-range__field">
<input id="simple-range" aria-describedby="simple-range-info" aria-valuetext="simple-range-valuetext" min="0" max="10" type="range" value="2"/>
<div class="flix-range__track-range" style="left:0;right:80%"></div>
</div>
<span class="flix-range__info" id="simple-range-info">Additional info text</span>
</div>
</div>
<div class="flix-form-row">
<div class="flix-range flix-range--small" style="width:300px">
<label class="flix-range__label" for="small-range">Small range:</label>
<span class="flix-range__value" id="small-range-valuetext">Value: 2</span>
<div class="flix-range__field">
<input id="small-range" aria-describedby="small-range-info" aria-valuetext="small-range-valuetext" min="0" max="14" type="range" value="7"/>
<div class="flix-range__track-range" style="left:0;right:50%"></div>
</div>
<span class="flix-range__info" id="small-range-info">Additional info text</span>
</div>
</div>Double variation
You can provide second range input to have 2 boundaries by using the --double modifier.
Note that this second option won't work in Internet Explorer due to inconsistent support of the pointer-events property on range inputs.
<div class="flix-range flix-range--double">
<label for="range-min-double" class="flix-range__label">Inner range (not supported in IE):</label>
<span class="flix-range__value flix-range__value--min" id="range-min-double-valuetext">Tue, 27 Nov, 16:00</span>
<span class="flix-range__value flix-range__value--max" id="range-max-double-valuetext">Tue, 28 Nov, 16:00</span>
<div class="flix-range__field">
<input id="range-min-double" aria-label="Minimum value" aria-valuetext="range-min-double-valuetext" min="0" max="100" type="range" value="0"/>
<input id="range-max-double" aria-label="Maximum value" aria-valuetext="range-max-double-valuetext" min="0" max="100" type="range" value="50"/>
<div class="flix-range__track-range" style="left:0;right:50%"></div>
</div>
</div>Range with steps
To display steps create a wrapper flix-range__steps and add each step inside a span flix-range__step. The steps wrapper must have an id and be connected to the range input using the list attribute.
Note: the markup of the steps container might change in the future to a more semantic datalist > options implementation, but for now styling datalist is not supported by Safari so it's only for presentation. This is why it's important to add role="presentation" aria-hidden="true" to the container for now.
As with the track-range you must also update each step to use the --active modifier using JavaScript.
<div class="flix-range">
<label class="flix-range__label" for="range-steps">Range with steps:</label>
<span class="flix-range__value" id="range-steps-valuetext">Value: 2</span>
<div class="flix-range__field">
<input id="range-steps" aria-describedby="range-steps-info" aria-valuetext="range-steps-valuetext" min="0" max="10" steps="1" type="range" list="range-steps-list" value="5"/>
<div role="presentation" aria-hidden="true" class="flix-range__steps" id="range-steps-list">
<span class="flix-range__step flix-range__step--active">0</span>
<span class="flix-range__step flix-range__step--active">1</span>
<span class="flix-range__step flix-range__step--active">2</span>
<span class="flix-range__step flix-range__step--active">3</span>
<span class="flix-range__step flix-range__step--active">4</span>
<span class="flix-range__step flix-range__step--active">5</span>
<span class="flix-range__step">6</span>
<span class="flix-range__step">7</span>
<span class="flix-range__step">8</span>
<span class="flix-range__step">9</span>
<span class="flix-range__step">10</span>
</div>
<div class="flix-range__track-range" style="left:0;right:50%"></div>
</div>
<span class="flix-range__info" id="simple-range-info">Additional info text</span>
</div>