<!-- Range with step --><label class="form-label" for="stepRange">Range with step</label><input class="form-range" id="stepRange" type="range" min="0" max="10" step="1">

<!-- Range with Value--><input class="form-range" type="range" min="0" max="100" value="50" step="1" onmousemove="rangevalue.value=value"><output class="py-1 px-2 border border-2 border-primary text-dark rounded ms-3" id="rangevalue"></output>

<!-- Range with double slide --><input class="custom-range-slider" type="text" name="my-range" value="" data-type="double" data-min="10" data-max="30" data-step="1" data-prefix="$ " data-hide-min-max="true" data-skin="round" data-grid="true" data-grid-num="12" data-grid-snap="true">

<!-- Single Range --><input class="custom-range-slider" type="text" name="my-range" value="" data-type="single" data-min="10" data-max="30" data-step="1" data-prefix="$ " data-hide-min-max="true" data-skin="square" data-grid="true" data-grid-num="12" data-grid-snap="true">