Press "Enter" to skip to content

jQuery Slider With Draggable & Touch Numeric Plugin

jQuery Slider plugin to customize the default select menu Mobile phone support (with jQuery Mobile). This Plugin is a simple, powerful, customizable, touch-enabled digital sliding jQuery accessory for specifying numerical values by clicking/tapping and dragging the sliding thumb.

draggable slider jquery, jquery slider, jquery carousel, jquery ui slider, drag and drop slider jquery, jquery range slider, jquery image slider, jquery slider example

How to make use of it:

1. Load the jquery-slider-min.js script after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-slider-min.js"></script>

2. Load jQuery Mobile library for touch help.

<script src="/path/to/cdn/jquery.mobile.min.js"></script>

3. Create a primary numeric slider utilizing the data-slider-box attribute:

<div data-slider-box></div>

4. Or initialize the plugin by way of JavaScript:

<div class="example"></div>
$(function(){
  $('.example').createSlide();
});

5. Determine the max value. Ideal for a variety of sliders.

$('.example').createSlide({
  maxvalue: 10
});

6. Determine the width of the numeric slider. Default: width of its guardian container.

$('.example').createSlide({
  width: 250
});

7. Determine the step size.

$('.example').createSlide({
  interval: 5
});

8. Output the numeric value in a container.

<div class="output"></div>
$('.example').createSlide({
  output: '.output'
});

9. Customize the progress bar that fills all of the area left to the thumb.

$('.example').createSlide({
  progress: true
});
.progress {
  width: 0px;
  background-color: #222;
}

10. Customize the preliminary text to be displayed on the slider thumb.

$('.example').createSlide({
  firstvalue: 'Hey'
});

11. Customize the types of the slider thumb.

$('.example').createSlide({
  firstvalue: 'Hey'
});

Draggable & Touchable Numeric Slider, jQuery Slider Plugin/Github


See Demo And Download

Official Website(mario-iliev): Click Here

This superior jQuery/javascript plugin is developed by mario-iliev. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *