<div class="ys-slider">
    <label class="ys-slider__label">
        <span class="ys-slider__label-text">Label for slider</span>
        <span class="ys-slider__control-wrapper">
            <input class="ys-slider__control" type="range" min="0" max="100" />
        </span>
    </label>
</div>

<div class="ys-slider">
    <label class="ys-slider__label">
        <span class="ys-slider__label-text">Choose bandwidth <span class="ys-u-visuallyhidden">(Options are 10, 20, 50, 100 and 500 megabits per second)</span>
            <span class="ys-slider__data-set" aria-hidden="true">
                <span class="ys-slider__data-item">10 mbit/s</span>
                <span class="ys-slider__data-item">25 mbit/s</span>
                <span class="ys-slider__data-item">50 mbit/s</span>
                <span class="ys-slider__data-item">100 mbit/s</span>
                <span class="ys-slider__data-item">500 mbit/s</span>
            </span>
            <span class="ys-slider__control-wrapper">
                <input class="ys-slider__control" type="range" min="1" max="5" step="1" />
            </span>
        </span>
    </label>
</div>

<div class="ys-slider">
    <label class="ys-slider__label">
        <span class="ys-slider__label-text">Choose data-package <span class="ys-u-visuallyhidden">(Options are 10, 20, 30, 40 and 50 gigabyte per month)</span></span>
        <span class="ys-slider__wrapper">
            <span class="ys-slider__minmax-label" aria-hidden="true">10 GB</span>
            <span class="ys-slider__control-wrapper">
                <input class="ys-slider__control" type="range" min="1" max="5" step="1" />
            </span>
            <span class="ys-slider__minmax-label" aria-hidden="true">50 GB</span>
        </span>
    </label>
</div>