Customizable Accessible jQuery Range Slider Plugin asRange - Download Customizable & Accessible jQuery Range Slider Plugin - asRange

Download Customizable & Accessible jQuery Range Slider Plugin – asRange

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable & Accessible jQuery Range Slider Plugin – asRange, hope it will help you in programming stack.

Customizable Accessible jQuery Range Slider Plugin asRange - Download Customizable & Accessible jQuery Range Slider Plugin - asRange

File Size: 275 KB
Views Total: 14123
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

asRange is a jQuery plugin which converts an input field (and even a DIV element) into an accessible, fully customizable range slider control allowing users to input a range of values.

Main features:

  • Allows to set initial/max/min values.
  • Custom step length.
  • Vertical or horizontal modes.
  • Keyboard interactions.
  • Custom tips and scales.
  • Lots of options, methods and events.

Basic usage:

1. To use this plugin, we need to load jQuery library and the jQuery asRange’s files in the html file.

view source
1 <link rel="stylesheet" href="asRange.css">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="jquery-asRange.js"></script>

2. Create an input field (or a DIV element) for the range slider.

view source
1 <div class="range-example-1"></div>
2 <!-- OR -->
3 <input class="range-example-input" type="text" min="0" max="10" value="5" name="points" step="0.01">

3. Call the function to render a basic range slider in the webpage.

view source
1 $("SELECTOR").asRange({
2   // options here
3 });

4. All default customization options for the range slider plugin.

view source
01 $("SELECTOR").asRange({
02  
03   // namespace
04   namespace: 'asRange',
05  
06   // requires additional skin file
07   skin: null,
08  
09   // max value
10   max: 100,
11  
12   // min value
13   min: 0,
14  
15   // initial value
16   value: null,
17  
18   // moving step at a time
19   step: 10,
20  
21   // limit the range of the pointer moving
22   limit: true,
23  
24   // initial range
25   range: false,
26  
27   // 'v' or 'h'
28   direction: 'h',
29  
30   // enable keyboard interactions
31   keyboard: true,
32  
33   // false, 'inherit', {'inherit': 'default'}
34   replaceFirst: false,
35  
36   // shows tips
37   tip: true,
38  
39   // shows scales
40   scale: true,
41  
42   // for formatting output
43   format: function format(value) {
44     return value;
45   }
46  
47 });

5. API methods.

view source
01 // set the val
02 $("SELECTOR").asRange('val', '10');
03  
04 // get the val
05 var value = $("SELECTOR").asRange('val');
06  
07 // Set the range value
08 $("SELECTOR").asRange('set', '10');
09  
10 // Get the range value.
11 var value = $("SELECTOR").asRange('get');
12  
13 // Enable the range slider
14 $("SELECTOR").asRange('enable');
15  
16 // Disable the range slider
17 $("SELECTOR").asRange('disable');
18  
19 // Destroy the range slider.
20 $("SELECTOR").asRange('destroy');

6. Events.

view source
01 // when init
02 $("SELECTOR").on('asRange::init', function (e) {
03   // do something
04 });
05  
06 // when ready
07 $("SELECTOR").on('asRange::ready', function (e) {
08   // do something
09 });
10  
11 // when enabled
12 $("SELECTOR").on('asRange::enable', function (e) {
13   // do something
14 });
15  
16 // when disabled
17 $("SELECTOR").on('asRange::disable', function (e) {
18   // do something
19 });
20  
21 // when the value is changed
22 $("SELECTOR").on('asRange::change', function (e) {
23   // do something
24 });
25  
26 // when mouse up
27 $("SELECTOR").on('asRange::end', function (e) {
28   // do something
29 });
30  
31 // when destroyed
32 $("SELECTOR").on('asRange::destroy', function (e) {
33   // do something
34 });

Change log:

2017-09-16

  • v0.3.4

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: