ionden / ion.rangeslider Goto Github PK

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! :)

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.

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

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

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.

Slider shoud snap to value, raunded by step.

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

A nice enhancement would be the ability to disable the slider.

When having a slider of 782px with with Min value 4 and Max value: 882. When trying to select 200 and 400 it will jump to: 199 or 201 and 398 or 401.

Reproduce:
Mousedown & move mouse to wanted value.
Mouseup --> value changes

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

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

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

Reproduce:

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

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!

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

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.

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.

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

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

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

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

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.

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

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.

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

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

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,

When i toogle ionRangeSlider, rangebar broken!

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.

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

The rounded cursor is not perfectly aligned for the nice white skin layout an offset for the cursor size should be taken into account.

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

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

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>

from and to options don't work :)

Hi,

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

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.

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

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

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.

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.

Is it possible to programmatically update the slider value?

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.

                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?

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 });
        }
    })

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.

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.

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.

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"

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

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.

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.

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.

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

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.

ionRangeSlider options:

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.