Range

                                                <div class="form-control">
                    <label class="form-control__label">
                        Slider or Range
                        <span class="icon icon-information-circle-solid"></span></label>
                    <input type="range" id="test-by-local" value="30" min="0" max="100" oninput="{testby_local.value=value}" />
                    <output for="test-by-local" id="testby_local">30</output>
                    <input type="range" id="test-by-local" value="10" min="0" max="100" step="5" oninput="{testby_locall.value=value}" />
                    <output for="test-by-local" id="testby_locall">10</output>
                </div>
                <div class="form-control">
                    <label class="form-control__label">
                        Slider or Range
                        <span class="icon icon-information-circle-solid"></span></label>
                    <div class="form-control__slider">
                        <div class="form-control__slider-range">
                            <span class="form-control__slider-range__selected"></span>
                        </div>
                        <div class="form-control__slider-input">
                            <input type="range" class="form-control__slider-input-min" min="0" max="1000" value="100" step="10">
                            <input type="range" class="form-control__slider-input-max" min="0" max="1000" value="900" step="10">
                        </div>
                        <div class="form-control__slider-label">
                            <div class="form-control__slider-label-number">
                                <label>Min</label>
                                <input type="number" class="form-control__slider-number-min" value="100">
                            </div>
                            <div class="form-control__slider-label-number">
                                <label>Max</label>
                                <input type="number" class="form-control__slider-number-max" value="900">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-control">
                    <label class="form-control__label">
                        Slider or Range without input number
                        <span class="icon icon-information-circle-solid"></span></label>
                    <div class="form-control__slider">
                        <div class="form-control__slider-range">
                            <span class="form-control__slider-range__selected"></span>
                        </div>
                        <div class="form-control__slider-input">
                            <input type="range" class="form-control__slider-input-min" min="0" max="1000" value="100" step="10">
                            <input type="range" class="form-control__slider-input-max" min="0" max="1000" value="900" step="10">
                        </div>
                    </div>
                </div>