Dkn. Range Slider

Custom range input based on web components API.

Code Docs

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 data example. If name attribute is defined, the value of slider will be visible in form.



<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...