NPM
npm install dkn-range-slider
CDN
<script src="https://unpkg.com/dkn-range-slider@latest/dist/dkn-range-slider.min.js" defer></script>
<script src="dkn"></script>
...
<dkn-range-slider></dkn-range-slider>
Demos and themes
<dkn-range-slider></dkn-range-slider>
<dkn-range-slider class="theme-default"
ticks ticks-step="5"
label-value label-suffix="$" label-limit-min="Low budget" label-limit-max="High budget" label-access="Default theme"
id="slider-1"
min="0" max="100" step="1" value="20"></dkn-range-slider>
<dkn-range-slider class="theme-minimal"
label-access="Minimal theme"
id="slider-2"
min="0"max="100" tep="1"value="20"></dkn-range-slider>
<dkn-range-slider class="theme-azure"
label-value label-access="Azure theme"
id="slider-3"
min="0" max="100" step="1" value="0"></dkn-range-slider>
<dkn-range-slider class="theme-pink"
label-value label-access="Pink theme"
id="slider-4"
min="0" max="100" step="1" value="44"
ticks ticks-step="10"></dkn-range-slider>
<form id="aform" action="index.html" method="post">
<dkn-range-slider class="theme-default"
name="slider-value" id="slider-4"
min="0" max="100"
ticks ticks-step="10"></dkn-range-slider>
<br>
<button type="submit">Submit</button>
</form>
More themes will be added soon...