jQuery only range slider

Hi,

The issue is when the max value is say 4.71 and step value is 0.10, then the slider maximum is rounded down to 4.70 and the slider pointer could not be moved further to reach the maximum of 4.71.

i.e the maximum value is rounded down to x.00 for all the slider maximum values ranging from x.01 to x.04 and with the example step value of 0.10.

But the maximum is set correctly for the values ranging from x.05 to x.09. The slider pointer can move up till the maximum without any rounding.

For more detail please refer and compare case 1 and case 3 in the demo http://jsfiddle.net/Megala/d8gf0k2t/2/

Could you please check this?

If anything is not clear, please let me know.

Thanks, Megala

Hi there:

I have a rangeslider with custom values set ([1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1500, 2000, 2500, 3000, 4000, 5000])

User can play with this values, but I have an external input when the value of the slider is updated. But I would like this input to be changed by the user and set any number, any custom number, for example: 77.

I have noticed that if I update the number of a rangeslider with fixed values, the "ball" goes to the index number of that numbers set.

How can I move the ball to the exact point when the ball should be if instead a set of values it would be a range from 1 to 5000 (in my case) ?

Difficult, uh ? ;-)

Hi there, I want to add a "no answer option" by a button added under the slider.

On click the slider shall be set on zero.

is this possible?

Thanks for answer, Mart

Fixes #234

Using the prettify reverse method won't do the trick when working with from and to values.

It will require extra work to reverse inputs too, for example: Fixing to value should fix the upper bound and release the lower bound.

I approached this by reversing the UI only, which also makes it usable in a Right-to-Left layout with ease.

Not sure if this going to be merged or not! so I only reversed the HTML5 skin, other skins reversal should be straight forward!

TODO:

• Reverse the remaining skins.
• Test all cases, I might have missed something!

Thanks

Great component. I am working with it for a few hours and is great. I had only see one issue: when you use custom values despite numbers, the update method doesnt work fine. Could anybody check it?

I actually want my slider to slide using the from and to label. That is when someone click and drag the from or to label, the slider should move.

I tried to see the doc (http://ionden.com/a/plugins/ion.rangeSlider/en.html) , but found nothing.

what should I do so that my slider move using those label?

https://cloud.githubusercontent.com/assets/2056756/7346000/ccfab81e-ecf7-11e4-9658-c50cf248656b.png

Hi,

i inclded the slider, use it with custom values and the slider seems to load okay but in Chrome and IE i can not drag the handles. Any idea what i'm doing wrong?

    var $cabins = $("#cabin-slider");

    $cabins.ionRangeSlider({
        type: "double",
        values: ["2","3","4","5","5+"],
    });

    $cabins.on("change", function () {
        var $this = $(this),
            value = $this.prop("value").split(";");

        $('#cabins').val(value[0] + "-" + value[1]);
    });

I am working on CSS generator that is using about 40+ sliders as options. On load the performance is ok , but when I need to update there is a noticeable lag on IE and FF. Chrome , Safari, Opera look ok .

Here is fiddle

http://jsfiddle.net/p9fsyx84/

note that on button click I must update all form inputs. With this lag , combined with CSS that needs to be applied to the page , I am looking at the 3-5 sec lag until all sliders have finished.

var slider = $range.data("ionRangeSlider"); Возвращает undefined соответственно задестроить нечего.

Делаю как в мануале 1 в 1. Нужна помощь.

Hi, I'm having issue detailed below with the slider.

Slider position resets to minimum on a slider type single for certain values. This happens specifically when we call the slider update after initialising the slider with the values mentioned.

Example values: Slider max and from as 4.75 and step value 0.10 Slider max and from as 2.28 and step value 0.20

The slider works fine for the values given below Slider max and from as 4.71 and step value 0.10 Slider max and from as 2.24 and step value 0.20

If you would like to see the slider behaviour for all these examples, please check http://jsfiddle.net/Megala/d8gf0k2t/

Your response to this will be much appreciated.

Thanks

I using rangeSlider in bootstap's model: http://getbootstrap.com/javascript/#modals

It seems the grid layout position is wrong:

My code is :

            min: 10,
            max: 50,
            from: 5,
            to: 25,
            type: 'double',
            step: 1,
            postfix: "°",
            prettify: false,
            hasGrid: true
        });

which works fine in the index page.

Any way to fix it??

I've got a Laravel project. I've just installed jQuery and ion.rangeSlider through npm.

"ion-rangeslider": "^2.3.1",
"jquery": "^3.6.0"

JQuery works as expected in the project. Trying to do the most basic example of a slider (for example below), I get an error:

<input name="MyCoolField" class="form-control" type="text" />

<script>
$(function() {
    $("[name=MyCoolField]").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });
});
</script>

The Error Is:

jquery.js?8262:4059 Uncaught TypeError: $(...).ionRangeSlider is not a function
    at HTMLDocument.eval (_filter-form.js?a5ef:22:32)
    at mightThrow (jquery.js?8262:3766:1)
    at process (jquery.js?8262:3834:1)

Sometimes the automatic grid-steps are too wide apart, so that the graphic input-selection is not sufficient. It would be a nice enhancement to allow typing the input-numbers, e.g. activate input-field by clicking on the input numbers like it is available in Spotfire.

Hi,

I'm attempting to add new sliders via JS, but initializing by class messes up the whole page, while initializing by id disables the previously created instances.

I'm sure its something easy, i just can't figure it out on my own :(

Here is what i'm talking about: https://jsfiddle.net/insideru/6y2kw57m/3/

Hi,

There is an issue when using range slider when a container has display: inline-flex or display: flex CSS rule.

When this happens range slider's width looks like it would be set to 0. Elements are displayed but are squeezed.

I used exisiting example from contributing guidelines here: https://jsfiddle.net/IonDen/b79q0vnm and added display: inline-flex to show this behavior: https://jsfiddle.net/16jvpk8d/