A slider component written with jquery

Usage no npm install needed!

<script type="module">
  import jsJquerySlider from 'https://cdn.skypack.dev/js-jquery-slider';



To use the package, get the sliderManager object by using:

const { sliderManager } = require('js-jquery-slider')

After including the sliderManager run either functions:

sliderManager.startSliders() //To run all sliders on page
sliderManager.startSliderById(id) //To run only a specific slider


The slider is completely hackable, meaning that you can implement your own design.

If you want however, there are 2 styles inclueded in the package: blueSlider and greenSlider.

Include them from the dist/styles/ folder as so:

import styles from 'js-jquery-slider/dist/styles/blueSlider.css';


After including the package, use the following structure to show a slider:

<div class="sliderDiv">
   <p class="sliderContainer">
     <span class="sliderHighlight"></span>
     <input class="slider" type="range" sliderValues="1~2~3~4~5~6~7"
     sliderEntryValue="3" />
     <output class="sliderOutput"></output>

Use the sliderValues="" to pass the values to the slider, and sliderEntryValue="" to choose the default value. Separate the values by using ~.

The input element will have 2 attributes you can use: sliderCurrentIndex and sliderCurrentValue.