Javascript Range Slider

Postion : Top-Left

0 %

<div class="custom-progress progress-up" style="width: 100%">
    <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
    <input type="range" class="form-range progress-range-counter" id="customRange1">
</div>

Postion : Top-Right

0 %

<div class="custom-progress top-right progress-up" style="width: 100%">
    <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
    <input type="range" class="form-range progress-range-counter" id="customRange2">
</div>

Postion : Bottom-Left

0 %

<div class="custom-progress progress-down" style="width: 100%">
    <input type="range" class="form-range progress-range-counter" id="customRange3">
    <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
</div>

Postion : Bottom-Right

0 %

<div class="custom-progress bottom-right progress-down" style="width: 100%">
    <input type="range" class="form-range progress-range-counter" id="customRange4">
    <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
</div>

noUI Slider

Using HTML5 input elements



<div class="container">
    <div id="html5"></div>
    <br/>
    <div class="row mt-4 mb-4">
        <div class="col-lg-6 mb-3">
            <select id="input-select" class="form-control"></select>
        </div>
        <div class="col-lg-6">
            <input type="number" class="form-control" min="-20" max="40" step="1" id="input-number">
        </div>
    </div>
</div>

Non linear slider



<div class="container">
    <div id="nonlinear"></div>
    <br/>
    <div class="row mt-4 mb-4">
            <div class="col-lg-6">
                <span class="example-val" id="lower-value"></span>
            </div>
            <div class="col-lg-6 text-end">
                <span class="example-val" id="upper-value"></span>
            </div>
    </div>
</div>

Locking sliders together



<div class="container">
    <div class="row mb-4">
        <div class="col-lg-12 mb-5">
            <div id="slider1"></div>
            <span class="example-val mt-4 d-inline-block" id="slider1-span"></span>
        </div>
    </div>
    <br/>
    <div class="row mb-0">
        <div class="col-lg-12 mb-5">
            <div id="slider2"></div>
            <span class="example-val mt-4 d-inline-block" id="slider2-span"></span>
        </div>
    </div>
    <div class="row">                                              
        <div class="col-lg-12">
            <button id="lockbutton" class="btn btn-primary" style="float: right; margin: 20px 0 0;">lock</button>
        </div>
    </div>
</div>

Copyright © 2026 DesignReset, All rights reserved.

Coded with