ionden / ion.rangeslider Goto Github PK

View Code? Open in Web Editor NEW

2.5K 96.0 508.0 735 KB

jQuery only range slider

Home Page: http://ionden.com/a/plugins/ion.rangeSlider/en.html

License: MIT License

CSS 11.24% JavaScript 71.59% Less 17.17%

range-slider javascript slider rangeslider range ranger range-picker rangeslider-js

ion.rangeslider's Introduction

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.

Version: 2.3.1 | Version 3.x is under development now
Project page and demos
Download ZIP
Support the plugin on GitHub sponsors

Description

Ion.RangeSlider — cool, comfortable, responsive and easily customizable range slider
Supports events and public methods, has flexible settings, can be completely altered with CSS
Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
Ion.RangeSlider supports touch-devices (iPhone, iPad, Nexus, etc.).
Ion.RangeSlider freely distributed under terms of MIT licence.
With this plugin you will be able to build beautiful range sliders, like this:

Key features

Skin support. (6 skins included)
Any number of sliders at one page without conflicts and big performance problems
Two slider types single (1 slider) and double (2 sliders)
Support of negative and fractional values
Ability to set custom step and snap grid to step
Support of custom values diapason
Customisable grid of values
Ability to disable UI elements (min and max, current value, grid)
Postfixes and prefixes for your numbers ($20, 20 € etc.)
Additional postfix for maximum value (eg. $0 — $100+)
Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
Slider writes its value right into input value field. This makes it easy to use in any html form
Any slider value can be set through input data-attribute (eg. data-min="10")
Slider supports disable param. You can set it true to make slider inactive
Slider supports external methods (update, reset and remove) to control it after creation
For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
Slider supports date and time

Demos

Dependencies

jQuery 1.8.x+

Usage

Add the following libraries to the page:

jQuery
ion.rangeSlider.min.js

Add the following stylesheets to the page:

ion.rangeSlider.min.css

CDN

Use CDNjs or JSdelivr to get latest version of plugin and jQuery.

<!--Plugin CSS file with desired skin-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

Install with NPM

Use NPM to download latest version of a plugin and install it directly in to your project.

npm install ion-rangeslider

Install with Bower

Use Bower to download latest version of a plugin and install it directly in to your project.

bower install ion-rangeslider

Install with Yarn

Use Yarn to download latest version of a plugin and install it directly in to your project.

yarn add ion-rangeslider

Initialisation

The slider overrides a native text input element.

<input type="text" id="example_id" name="example_name" value="" />

To initialise the slider, call ionRangeSlider on the element:

$("#example_id").ionRangeSlider();

Experiments playground

Here you can find bunch of advanced JSFIDDLE demos with different, non-standard use cases:

Settings

Option	Data-Attr	Defaults	Type	Description
`skin`	`data-skin`	`flat`	string	Choose UI skin to use (flat, big, modern, round, sharp, square)
`type`	`data-type`	`single`	string	Choose slider type, could be `single` - for one handle, or `double` for two handles
`min`	`data-min`	`10`	number	Set slider minimum value
`max`	`data-max`	`100`	number	Set slider maximum value
`from`	`data-from`	`min`	number	Set start position for left handle (or for single handle)
`to`	`data-to`	`max`	number	Set start position for right handle
`step`	`data-step`	`1`	number	Set sliders step. Always > 0. Could be fractional
`min_interval`	`data-min-interval`	`-`	number	Set minimum diapason between sliders. Only for double type
`max_interval`	`data-max-interval`	`-`	number	Set minimum maximum between sliders. Only for double type
`drag_interval`	`data-drag-interval`	`false`	boolean	Allow user to drag whole range. Only for double type
`values`	`data-values`	`[]`	array	Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed
`from_fixed`	`data-from-fixed`	`false`	boolean	Fix position of left (or single) handle
`from_min`	`data-from-min`	`min`	number	Set minimum limit for left (or single) handle
`from_max`	`data-from-max`	`max`	number	Set maximum limit for left (or single) handle
`from_shadow`	`data-from-shadow`	`false`	boolean	Highlight the limits for left handle
`to_fixed`	`data-to-fixed`	`false`	boolean	Fix position of right handle
`to_min`	`data-to-min`	`min`	number	Set minimum limit for right handle
`to_max`	`data-to-max`	`max`	number	Set maximum limit for right handle
`to_shadow`	`data-to-shadow`	`false`	boolean	Highlight the right handle
`prettify_enabled`	`data-prettify-enabled`	`true`	boolean	Improve readability of long numbers: 10000000 → 10 000 000
`prettify_separator`	`data-prettify-separator`		string	Set up your own separator for long numbers: 10000000 → 10,000,000 etc.
`prettify`	`-`	`null`	function	Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates
`force_edges`	`data-force-edges`	`false`	boolean	Sliders handles and tooltips will be always inside it's container
`keyboard`	`data-keyboard`	`true`	boolean	Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
`grid`	`data-grid`	`true`	boolean	Enables grid of values above the slider
`grid_margin`	`data-grid-margin`	`true`	boolean	Set left and right grid gaps
`grid_num`	`data-grid-num`	`4`	number	Number of grid units
`grid_snap`	`data-grid-snap`	`false`	boolean	Snap grid to sliders step (step param). If activated, grid_num will not be used. Max steps = 50
`hide_min_max`	`data-hide-min-max`	`false`	boolean	Hides min and max labels
`hide_from_to`	`data-hide-from-to`	`false`	boolean	Hides from and to labels
`prefix`	`data-prefix`	``	string	Set prefix for values. Will be set up right before the number: $100
`postfix`	`data-postfix`	``	string	Set postfix for values. Will be set up right after the number: 100k
`max_postfix`	`data-max-postfix`	``	string	Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+
`decorate_both`	`data-decorate-both`	`true`	boolean	Used for double type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k
`values_separator`	`data-decorate-both`	`-`	string	Set your own separator for close values. Used for double type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
`input_values_separator`	`data-input-values-separator`	`;`	string	Separator for double values in input value property. `<input value="25;42">`
`disable`	`data-disable`	`false`	boolean	Locks slider and makes it inactive. Input is disabled too. Invisible to forms
`block`	`data-blokc`	`false`	boolean	Locks slider and makes it inactive. Input is NOT disabled. Can be send with forms
`extra_classes`	`data-extra-classes`	`—`	string	Traverse extra CSS-classes to sliders container
`scope`	`-`	`null`	object	Scope for callbacks. Pass any object
`onStart`	`-`	`null`	function	Callback. Is called on slider start. Gets all slider data as a 1st attribute
`onChange`	`-`	`null`	function	Callback. IS called on each values change. Gets all slider data as a 1st attribute
`onFinish`	`-`	`null`	function	Callback. Is called when user releases handle. Gets all slider data as a 1st attribute
`onUpdate`	`-`	`null`	function	Callback. Is called when slider is modified by external methods `update` or `reset`

Description of data passed to callbacks (onChange and etc.)

Result is object type and passed to callback as first argument:

Obj: {
    "input": object,            // jQuery-link to input
    "slider": object,           // jQuery-link to sliders container
    "min": 1000,                // MIN value
    "max": 100000,              // MAX values
    "from": 10000,              // FROM value
    "from_percent": 10,         // FROM value in percents
    "from_value": 0,            // FROM index in values array (if used)
    "to": 90000,                // TO value
    "to_percent": 90,           // TO value in percents
    "to_value": 0,              // TO index in values array (if used)
    "min_pretty": "1 000",      // MIN prettified (if used)
    "max_pretty": "100 000",    // MAX prettified (if used)
    "from_pretty": "10 000",    // FROM prettified (if used)
    "to_pretty": "90 000"       // TO prettified (if used)
}

Creating slider (all params)

An example of a customised slider:

$("#example").ionRangeSlider({
    skin: "big",
    min: 0,
    max: 10000,
    from: 1000,
    to: 9000,
    type: 'double',
    prefix: "$",
    grid: true,
    grid_num: 10
});

You can also initialise slider with data-* attributes of input tag:

data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"

Public methods

To use public methods, at first you must save slider instance to variable:

// Launch plugin
$("#range").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});

// Saving it's instance to var
var slider = $("#range").data("ionRangeSlider");

// Fire public method
slider.reset();

There are 3 public methods:

// UPDATE - updates slider to any new values
slider.update({
    from: 300,
    to: 400
});

// RESET - reset slider to it's first values
slider.reset();

// DESTROY - destroys slider and restores original input field
slider.destroy();

One more look on demos

All plugins options are covered in demos.

Update history

Support Ion-series plugins development:

Support the plugin on GitHub sponsors
Buy me a coffee: https://www.buymeacoffee.com/ionden

ion.rangeslider's People

Contributors

Stargazers

Watchers

Forkers

lifelive krrrishh chr1gu yomigits praefect radum rhelfer hussam-m yangar nikitok a973c msoftware sergslon hernansartorio qvsoft danfriedma pogoretski rymohr tenbits elfrey prakashnsm davgit ajmalummer30 mikesworkspace flayzeraynx esya cpiekacz yilab namoricoo vladcovaliov dmitry-fomin yorkfx yfix jcsuzanne nufusion nordth divyanshkumar berdof rinkurock 360weboy steenkuyl yajinn cloozis gpetja bez4pieci seco richi180483 mzabara dpmooney acerb marviljoy zizizak rogervolsi ljq086 veera4u alexbelvg trunow alexuson shterev yashilanka randy-ran jonathanza philipp-heidrich shoorick bexidle deonclem iejerry galexant dj31416 code-ua rstudio kentucky-roberts ninetheme topwebmaster harunozer culaido rayka-team sympho thongtran-dev mohammadyounes esk525 snowattitudes dnbmx shawnliujw silviocacamo raining buildfuture filospateam sourcecode waspar abramadams celuie unconditional othlu schuka-kirill webmansa lscoates gholol hanswang z0091

ion.rangeslider's Issues

Min handle button goes of screen when value is specified

Browser: Firefox 23.0.1

Test Case:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Slider example</title>
        <script type="text/javascript" language="javascript" src="js/jquery-2.0.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="slider/ion.rangeSlider.min.js"></script>
        <link href="slider/normalize.min.css" rel="stylesheet" type="text/css" />
        <link href="slider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
        <link href="slider/ion.rangeSlider.skinSimple.css" rel="stylesheet" type="text/css" />
    </head>
  <body>
    <input type="text" id="test" name="rangeName" value="10:100" />
        <script type="text/javascript" charset="utf-8">
            $('#test').ionRangeSlider({
                min: 0,
                max: 100,
                from: 0,
                to: 100,
                type: 'double',
                step: 1,
                hasGrid: false,
                hideText: false
            });
        </script>
  </body>
</html>

skinSimple was edited to look for the image in the same directory.

This bug does not happen with

value=""

Instead of

value="10;100"

Incorrect min/max on big step (rounding error)

Initialization of slider:
min: 247
max: 8277
step: 100

Reproduce / what happens?
When the slider opens it looks good, min = 247, max = 8277

When click on "from" handle and moving a bit right and then left the minimum value is adjusted from 247 to 200. Also when doing this the "to" value adjust itself to 8300, while this handle was not dragged.

I end up with values as low as 200 and as high as 8300, which is giving me problems with validation (out of range error), server-side. Another problem is that the user thinks these values are available, when they are not.

Logarithmic increase of values

Hello again, I thought this deserved a seperate issue!

If there is a large range of numbers, for example 0.1-150.000, is is really difficult to select a range of 10s or 100s.

It would be great if the values increased logarithmically with small values for small numbers and values increasing as you go at the end of the range.

(ebay uses a similar technique for it's price range)

Thanks for your time! :)

Android position on dragging

The position of the slider and line etc. are not updated while dragging on android 4.x .

Only on touchend the position of the element visually changes.

onFinish onChange should have access to $slider

I think both this functions need access to the $slider variable. I use multiple sliders, selected by css class-name and onFinish I need to submit the parent form.

Color line for single slider

There should be color line from start point to slider for single slider type. Just like diapason line in double slider.

Use range input and min, max, step attributes

This seems almost too obvious to me, so chances are I'm missing something but: would it be better to use a range type input rather than a text input? As well as being more logical it would also mean you could read the min, max and step options from the associated attributes.

ie. The following two would be equivalent:

<input type="text" value="10;500" data-step="5">

and

<input type="range" min="10" max="500" step="5">

Using <input type="range"> actually works already, but the attributes aren't read.

input value is set as min/max instead of from/to

                if (slider.attr("value")) {
                    settings.min = parseInt(slider.attr("value").split(";")[0], 10);
                    settings.max = parseInt(slider.attr("value").split(";")[1], 10);
                }

Isn't the value of the input element supposed to contain the from/to values?

Feature Request: customize or disable prettify

In ion.rangeSlider.js Line 16:

return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g,"$1 ");

A function is used to format the numbers and group them by 3.
In my use case i'm displaying years from 1900 to 2100. Grouping by 3 leads to numbers "1 900" to "2 100". For years this doesn't look good.

Position calculation - '%' instead of 'px'

It would be much better, when positioning the range/drager, to use percents instead of pixels. This would allow to calculate proper positions even in detached node state - where the .width() is not available

Slider does not work with "inaccurate" mouse handling

Reproduce:

mousedown on horizontal slider element
move to right or left (works as normal)
move up or down so mouse pointer is not on slider anymore
move to right or left (slider doesn't work)
mouseup

Grid not responsive - And an example solution

While the slider itself attempts to be responsive, the grid and text components don't update their position to respect the new size. While there may be a better CSS solution, below is my "hack" simple solution to this issue in case it may help others.

var updateSliderScale;
$(window).resize(function(){
    clearTimeout(updateSliderScale);
    updateSliderScale = setTimeout(function(){
        $(yourSliderHere).ionRangeSlider('update');
    }, 100);
});

This simply watches to see if the browser resizes, and if it does it will force the ionRangeSlider to update itself. I've added a 100ms timer to it so it won't lag with unecissary update calls which can stack up quite quickly.

Не работает тач на android

Добрый день, перетаскиваение не хочет работать на андройде.
На виндоус фон и айфоне все отлично, а на андройде отображается нажатие, но пины не тащатся.

Пытался отловить проблему сам, но не получилось.

Hide parent (min/max) text only, leave labels showing

Enhancement request;

Looking to hide just the parent (left side and right side) min and max text only, while keeping the current to/from text (that hovers) viewable.

Default decimal step are rounded off

If I select a default value of 1.5 (with step setting as 0.5) after I submit a form the cursor is positioned at 2 (as the value gets rounded off). This is not the expected behavior when decimals are allowed in step and you can see the 1.5 on the grid. I hope this makes sense.

Нелинейное изменение шага

Привет!
Слайдер отличный, очень не хватает возможности нелинейного изменения шага. Например, есть границы 0-10000, слайдер разделяется на 3 равные части, 0-100 - шаг 10, 100-1000 - шаг 100, 1000-10000 - шаг 1000.

Feature Request: Click on line to move slider

It would be really nice if it were possible to click an arbitrary position on the line to move the slider to this position of the line. In case of a double slider the slider which is closest by can be moved.

Slider Displaying Weirdly When Hidden

Hello,

Thank you for such great tool, i'm having a small issue, and i'm not sure how to solve it, basically the slider is displaying weirdly when is hidden in a div that is then displayed through the click of a button with the "show" jquery function.

Here's a screen http://cl.ly/SbR7 is there any way to fix the issue?

Thank you.

Drag whole range

It would be nice to be able to drag the slider when in "double" mode to move the whole range. (Would move the two sliders).

Snap to step

Slider shoud snap to value, raunded by step.

When using multiple sliders and data-attributes, sliders use the wrong options

When initiating multiple sliders at the same time (ie. $('.range-slider').ionRangeSlider();) using data-attributes to set options on each, the attributes from the final slider are used for all of them.

So I have:

<label>Number of Workers
  <input class="range-slider" type="text" value="1;1000" data-min="1" data-max="1000" data-step="1">
</label>
<label>Average hours
  <input class="range-slider" type="text" value="5;50" data-min="5" data-max="50" data-step="0.5">
</label>
<label>Current pay rate
  <input class="range-slider" type="text" value="6;20" data-min="6" data-max="20" data-step="0.01" data-prefix="&pound;">
</label>

Calling $('.range-slider').ionRangeSlider(); gives me:

Which looks fine, but as you can see there are a few issues when you go to use it:

All the sliders are now prefixed with the £ symbol, only the 3rd one should be
All the sliders are using a decimal step. This has also broken the first one, it occasionally shows a load of extra decimals similar to #38
Although the min and max labels look correct, the ranges have actually all changed to 6 - 20

Reseting the slider

Hi.
Is it possible to manually set the slider's current value? Or reset it to the min/max default?

On hover css bug

Добрый день, нашлась еще одна проблема.

https://dl.dropboxusercontent.com/u/8400835/slider_css_bug.jpg

При наведении на слайдер далеко справа подсвечивается правый ползунок. Постарался нарисовать где мышка находится.

Этот баг так же влияет на разметку, т.к. создается большой отступ справа.

How to programmatically update the value

Is it possible to programmatically update the slider value?

Keyboard events on slider focus like jQuery UI Slider

Было бы неплохо предусмотреть полную доступность слайдера, даже с клавиатуры. Например, как это сделано у jQquery UI Slider - когда ползунок в фокусе, стрелки влево-вправо и вверх-вниз, кнопки home, end, page up, page down меняют позицию ползунка.

"from" does not default to "min"

Issue: "from" does not default to "min" (default to 10 instead)

Browser: Firefox 23.0.1
OS: Win7 Pro 64 bit
IonRangeSlider: 1.6.3

Test Case:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Slider example</title>
        <script type="text/javascript" language="javascript" src="js/jquery-2.0.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="slider/ion.rangeSlider.min.js"></script>
        <link href="slider/normalize.min.css" rel="stylesheet" type="text/css" />
        <link href="slider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
        <link href="slider/ion.rangeSlider.skinSimple.css" rel="stylesheet" type="text/css" />
    </head>
  <body>
    <input type="text" id="test" name="rangeName" value="" />
        <script type="text/javascript" charset="utf-8">
            $('#test').ionRangeSlider({
                min: 0,
                max: 100,
                type: 'double',
                step: 1,
                hasGrid: false,
                hideText: false
            });
        </script>
  </body>
</html>

skinSimple was edited to look for the image in the same directory.

Keyboard and mousewheel support

When we have a big value range and want to even switch micro value, it's really hard to use if we use mouse to get the right value.
For example: we have range from 1-1000000 , but the step is just 0.1
So i think it would be nice if we can use keyboard(left/right | up/down key) to move the slider step by step, and the same for mousewheel, maybe hold [Shift] key if we want to move Step * 10. The slider only can be moved if it's focus, that means we have to click on slider control before we can move it.
And also have option to show input box value together slider, so we can see the value changed in the input box and can adjust it if need.
In double range mode, it's great if we can have 2 input box than only one, for example: for the price range of product, so we can replace these 2 value boxes with the slider.

callback onFinish triggers when using method update

The manual states about onFinish "Triggered once, after slider work is done. Returns object with all slider values". I assume "slider work" is the user moving the slider and then releasing the mouse button (end click/drag). So this callback should not trigger when using the update() method i think.

mouse up/down behavior changes when moving mouse out of browser window

Steps:
Grab slider control (mousedown)
Move somewhere on slider
Move mouse outside of browser window
Release mousebutton (mouseup)
Move mouse back into browser window

Now the slider control follows the mouse as it still thinks mouse button is down, while it's not.

ionRangeSlider update

Is it possible to update the step onChange ?

I tried with the following code but i think there is a loop and i get : "too much recursion"

    $('#py-prices').ionRangeSlider({
        min: 0,
        max: 10000,
        step: 100,
        from: 100,
        to: 10000,
        type: "double",
        onChange: function (obj) {        // callback, is called on every change
            var prices = $("#py-prices").val().split(";")
            var maxprice = prices[1]
            var minprice = prices[0]
            $("#min-price").html(minprice)
            $("#max-price").html(maxprice)
            if (maxprice >= 5000) $("#py-prices").ionRangeSlider("update", { step: 1000 });
            if (maxprice < 5000) $("#py-prices").ionRangeSlider("update", { step: 100 });
        }
    })

Becomes slow when updated

When slider is updated it becomes slower and the more you update it the slower it becomes. At first I initiate the plugin.
Then from input:text update it several times, and when start dragging, notice delays.

"from" value becomes wrong after updating and dragging the slider

I have a slider small in width (about 180px) and range from 0 to 30 000
I update the slider with new values (from 1 to 50)
Then I start dragging the slider which changes the "to" value. And at the same time "from" value becomes 0, although i haven't dragged it.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of IonDen/ion.rangeSlider!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library IonDen/ion.rangeSlider is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "IonDen/ion.rangeSlider",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Dynamic width / Range Slider Initialization

Hello! Great job on this one! Exactly what I was looking for!

How easy would it be to implement dynamic width for the range slider?

The same could probably be achieved with the slider's reinitialization.

Min/max do not work with predefined value or without semi-colon

If I specify the min and max in the options they are ignored. The value field is the only one that matters. The slider cannot be used to load something with predefined values, e.g. I want to load a field where 2 is the predefined values and the min is 0 and the max is 6 but I cannot do so as once a value is specified, the options are ignored.

The current value shows "NaN weeks" and the max value shows "NaN weeks."

JS

$('#vacation').ionRangeSlider({
    type: 'single',
    step: 1,
    min: 0,
    max: 6,
    from: 0,
    to: 6,
    postfix: ' weeks'
})

HTML

<div class="input number">
    <label for="vacation">Weeks of Vacation</label>
    <input type="text" value="2" id="vacation">
</div>

Remove "security margin" around handlers

There seems to be a "security margin" around the handlers so when I have two sliders close to each other the left handler set to the rightmost position and the right handler to the leftmost position, the areas are overlapping and I have problems grabbing the handler I want.

I made a short video of this: http://screencast.com/t/3HjCyz4tq

Вынести в параметры smNum и bigNum в методе setGrid

Чтобы можно было настроить вид сетки.

Еще можно как-нибудь сделать, чтобы сетка строилась не по равным промежуткам? Например у меня указаны числа от 1 до 105. А сетка, чтобы была с делениями 1, 10, 20, 30,...100,105. Указать такие в самой сетке у меня получилось, но тогда числа на слайдере не совпадают уже с сеткой.

Slider not updated when hidden

When the slider is hidden while initializing, the markers are not in the correct position.
Refer the following fiddle for the problem:
http://jsfiddle.net/sowdri/8vbyD/2/

Thanks,

не целые и отрицательные числа

Приветствую.
Хотелось бы видеть поддержку отрицательных чисел в слайдере. Он вроде бы и работает с ними, но как то коряво, особенно при обновлении страницы скачет положение мин/макс ползунка. Это именно касается наличия положительного и отрицательного числа в слайдере, а-ля "градусник".

Также было бы хорошо реализовать поддержку не целых чисел вида 1.10 / 0.10, тут конечно понятно, что можно самому сделать через
$('input#minprice').val((obj.fromNumber/1000).toFixed(2));
но опять же, наличие такого функционала, пусть даже через включении в настройках, было бы не лишьним.

Multiple Ranges

Hi,

Would it be possible to have multiple ranges. To define for example multiple sections of the day.

Add onLoaded callback

onLoaded callback would be nice to see especially when you reinitialize the plugin, as onFinish is not fired when the plugin is updated.

Updates

Add new callback (onStart)
Add events
Add link to input in all callbacks

Setting initial value fails with large numbers

Here is a sample:

http://neighborhoodlender.studiobanks.us/test.html#step/5

the default number is correct (150000) but the slider selector is still all the way to the left.

min: 0,
max: 100,
type: 'double',
step: 0.1,
hasGrid: false,
hideText: false

Most steps go normally. Like 0.1 0.2 ... but then some steps look like 0.30 000 000 000 000 004

I would guess there is a problem with FLOATS.

onFinish function Called by each changing

This is very nice Plugin .. i liked it .
But there is a very very small problem ..
if type of slider is "single" in "mousedown" callback event you should set True sliderIsActive variable ..
Thanks