Slider Styles

Slider Simple

0 10 
                        <div class="slider">
                            <label class="slider__label" for="slider">Slider Label</label>
                            <div class="slider__wrap">
                                <input id="slider" class="slider__input" name="#NAME" type="range" min="0" max="100" value="50" step="1" aria-live="polite">
                            </div>
                        </div>

Slider Detailed

                        <div class="slider">
                            <label class="slider__label" for="slider">Slider Label</label>
                            <div class="slider__wrap">
                                <input id="slider" class="slider__input" name="#NAME" type="range" min="0" max="100" value="50" step="1" data-current-value="true" data-tooltip="true" data-min-max="true" aria-live="polite">
                            </div>
                        </div>

Slider Icon

                        <div class="slider">
                            <label class="slider__label" for="slider">Slider Label</label>
                            <div class="flex">
                                <i class="ico ico--f-sound"></i>
                                <div class="slider__wrap">
                                    <input id="slider" class="slider__input" name="#NAME" type="range" min="0" max="100" value="50" step="1" data-tooltip="true" data-min-max="true" aria-live="polite">
                                </div>
                            </div>
                        </div>

Slider Disabled

                        <div class="slider">
                            <label class="slider__label" for="slider">Slider Label</label>
                            <div class="slider__wrap">
                                <input id="slider" class="slider__input" name="#NAME" type="range" min="0" max="100" value="50" step="1" data-current-value="true" data-tooltip="true" data-min-max="true" aria-live="polite" disabled>
                            </div>
                        </div>

Slider Documentation

Use

Max attribute must be divisible by the step attribute

To show the current value box add data-current-value="true" to the input tag

To show the value tooltip add data-tooltip="true" to the input tag

To show the min/max values add data-min-max="true" to the input tag

To disable add disabled to the input tag