I've created a slider that works great:

$("#size-slider").slider({...options....});

i set the value of the input element so:
$("#size-slider").val(50);

I would like the location of the pointer of the slider to adjust to the new value.
I've tried:
$("#size-slider").data("jslider").update();

Thank you, Christopher

Hi, one more time :)

In HTML5 there is Validation error on line:

<input id="price_range" type="slider" name="price_range" value="200000;750000">

Bad value slider for attribute type on element input.

type="slider" changed to type="text"

and the slider is still working :)

Is possible to have multiple selectors? As in JQueryUi Slider?

Something like :

slider({
values: [0,200,300,500],
from: 0,
to: 500,
scale: [0, '|', 200, '|', '300', '|', 500],
limits: false, step: 1
});

Thanks!

Hello, this looks great - I'm having an issue which I suspect is requireJS compatibility. The error is in the compressed js, and firebug reports

"b.settings.value is undefined"

I am using requireJS to load jquery - do you have a dependency on a specific Jquery version?

Thanks

Можно ли сделать чтобы при клике на любую область слайдера, ближайший маркер перемещался туда, как это сделано например в фильтре http://market.yandex.ru/guru.xml?CMD=-RR=0,0,0,0-PF=1801946~EQ~sel~1870347-VIS=8070-CAT_ID=109743-EXC=1-PG=10&hid=90490 (Цена)?

That's because the sprite is that long and the CSS doesn't use background-repeat: repeat-x for the value filling.

I don't want to show any digits on the slider bar.

Could you help me?

I love this control. Very nicely done. If there were one more feature I would be completely over the moon ...

I would like to be able to highly a subsection of the range as a "recommended" range with a background color to the slider in the part of the range that is recommended. Something like this:

{
from: 1,
to: 10,
step: 1,
suggest-min: 4,
suggest-max: 6,
suggest-color: green,
dimension: ' $'
}

if range slider is form 10 to 100 length , we have to do min to 18 and less than 18 should not be select , I am unable to do that .
Please help ........

Thanks so much for the great plugin.

I was wondering if you'd considered making it work with zepto, since this plugin is aimed, at least partially, at mobile devices, and zepto is a nice lightweight jquery alternative.

I tried to make this work with zepto and had issues getting the 'value' attribute of the parameter. Switching to jquery 1.8.3 worked just fine.

Error messages:

Firefox:
Error: TypeError: value is undefined
Source File: http://localhost:8080/qunittest/src/main/www/js/lib/jquery.slider.js
Line: 626

Chrome:
Uncaught TypeError: Cannot call method 'toString' of undefined

Hi.
I love this slider.. Very easy to implement and customise, but one thing I have found is that it doesn't work on non-touch mobile devices because you can't drag or select the pointer.

Is there a way to make the jslider-bg clickable so that when you click on this the pointer moves to where you clicked and the appropriate value is assigned?

Apologies if this is already possible and I have missed something.

There is an issue where the second slider group (not in the first tab) will not display the handle values in either the correct spot, and will not always move correctly when the handles are moved.

When I move the code out of the tabs, all works as expected.

When I write same value to "to and from" plugin works strange. For example:

$("#slider1").slider({
from: 150,
to: 150,
step: 1
});

$("#slide").slider({ 
    from: 5, 
    to: 200, 
    step: 1, 
    round: 1,  
    dimension: ' km', 
    skin: "round",
    callback: function(value) {
        var userSlide = $("#slide").val();
        $('#slidevalue').text(userSlide);
    }
});

how can I reset the slider value in another function

resetValue: function {
    // reset the slide value to 50, possible?
    $("#slide").val('50');  
}

Thanks

<div style="width: 500px; margin: 100px;">
    <input id="Sliderxxx" type="slider" name="price" value="0;0" />
</div>
<script type="text/javascript" charset="utf-8">
    jQuery("#Sliderxxx").slider({
        from: 1,
        to: 19,
        smooth: false,
        scale: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19']
    });
</script>

Result: http://imageshack.us/photo/my-images/717/wrongwp.png/

Scale is too long, reason is in function generateScale() in the following line:

var prc = Math.round((100/(s.length-1))*10)/10;

The step precentage distance is rounded up to one decimal place, which is not enough:

<div class="jslider-scale">
    <span style="left: 0%"><ins style="margin-left: -3px;">1</ins></span>
    <span style="left: 5.6%"><ins style="margin-left: -3px;">2</ins></span>
    <span style="left: 11.2%"><ins style="margin-left: -3px;">3</ins></span>
    <span style="left: 16.799999999999997%"><ins style="margin-left: -3px;">4</ins></span>
    <span style="left: 22.4%"><ins style="margin-left: -3px;">5</ins></span>
    <span style="left: 28%"><ins style="margin-left: -3px;">6</ins></span>
    <span style="left: 33.599999999999994%"><ins style="margin-left: -3px;">7</ins></span>
    <span style="left: 39.199999999999996%"><ins style="margin-left: -3px;">8</ins></span>
    <span style="left: 44.8%"><ins style="margin-left: -3px;">9</ins></span>
    <span style="left: 50.4%"><ins style="margin-left: -6px;">10</ins></span>
    <span style="left: 56%"><ins style="margin-left: -5.5px;">11</ins></span>
    <span style="left: 61.599999999999994%"><ins style="margin-left: -6px;">12</ins></span>
    <span style="left: 67.19999999999999%"><ins style="margin-left: -6px;">13</ins></span>
    <span style="left: 72.8%"><ins style="margin-left: -6px;">14</ins></span>
    <span style="left: 78.39999999999999%"><ins style="margin-left: -6px;">15</ins></span>
    <span style="left: 84%"><ins style="margin-left: -6px;">16</ins></span>
    <span style="left: 89.6%"><ins style="margin-left: -6px;">17</ins></span>
    <span style="left: 95.19999999999999%"><ins style="margin-left: -6px;">18</ins></span>
    <span style="left: 100.8%"><ins style="margin-left: -6px;">19</ins></span>
</div>

As you can see the last step is at 100.8%. Changing the line I was talking about to:

var prc = Math.round((100/(s.length-1))*1000000)/1000000;

result in distances rounded up to six decimal places:

<div class="jslider-scale">
    <span style="left: 0%"><ins style="margin-left: -3px;">1</ins></span>
    <span style="left: 5.555556%"><ins style="margin-left: -3px;">2</ins></span>
    <span style="left: 11.111112%"><ins style="margin-left: -3px;">3</ins></span>
    <span style="left: 16.666668%"><ins style="margin-left: -3px;">4</ins></span>
    <span style="left: 22.222224%"><ins style="margin-left: -3px;">5</ins></span>
    <span style="left: 27.77778%"><ins style="margin-left: -3px;">6</ins></span>
    <span style="left: 33.333336%"><ins style="margin-left: -3px;">7</ins></span>
    <span style="left: 38.888892%"><ins style="margin-left: -3px;">8</ins></span>
    <span style="left: 44.444448%"><ins style="margin-left: -3px;">9</ins></span>
    <span style="left: 50.000004000000004%"><ins style="margin-left: -6px;">10</ins></span>
    <span style="left: 55.55556%"><ins style="margin-left: -5.5px;">11</ins></span>
    <span style="left: 61.111116%"><ins style="margin-left: -6px;">12</ins></span>
    <span style="left: 66.666672%"><ins style="margin-left: -6px;">13</ins></span>
    <span style="left: 72.222228%"><ins style="margin-left: -6px;">14</ins></span>
    <span style="left: 77.777784%"><ins style="margin-left: -6px;">15</ins></span>
    <span style="left: 83.33334%"><ins style="margin-left: -6px;">16</ins></span>
    <span style="left: 88.888896%"><ins style="margin-left: -6px;">17</ins></span>
    <span style="left: 94.444452%"><ins style="margin-left: -6px;">18</ins></span>
    <span style="left: 100.00000800000001%"><ins style="margin-left: -6px;">19</ins></span>
</div>

And the slider then looks correct: http://imageshack.us/photo/my-images/94/correcto.png/

But although GREAT plugin.

Regards
Simon

At the moment it seems to only take one input for two values in a range.

<input id="Slider2" type="slider" name="price" value="5000;50000" />

Better:

<input class="Slider2" type="slider" name="min_price" value="5000" /> <input class="Slider2" type="slider" name="max_price" value="50000" />

Thanks for creating the great package. The problem is due to this line in the css file

.jslider .jslider-pointer { background: url(../img/jslider.png) no-repeat 0 0; }

The background in the png file is 500px long. If a slider is longer than 500px, the slider is not fully covered by whatever color of the background image. Changing "no-repeat" to "repeat" solves the problem.

Thanks again.

Здравствуйте Егор.

Возможно-ли в вашем слайдере jslider сделать так, чтобы движки
принимали только определенные значения, допустим из массива

var slider_Value = ['0', '35', '71', '106', '142', '177'];

Если не возможно в данной реализации, то сколько будет стоить сделать
такую возможность?

С уважением, Аркадий Седельников.

Hi,
is there a way to make heterogenity works in one way.. like this: http://img39.imageshack.us/img39/5527/onewayslideto.jpg

with one input slider and filled up.

При загрузке страницы слайдер находится в скрытом блоке, когда нажимаю его показать, он не корректно отрисовывается. Но как только я изменяю размер страницы, то становится все ок. Как вручную запустить перерисовку слайдера?
$("#filter .price input").data("jslider").redraw(); пробовал, не получилось

Hi,
First of all, this seem to be a great tool. Thanks for your work. But, I got an error "TypeError: Cannot call method 'split' of undefined", whenever I try to use it. Is there anything I missed? I am using jQuery 1.7.1, and UI 1.8.18. Thank you.

I want two hotkeys (down,up) to instead of using mouse change the bar.

Hi,
First of all thanks for a great plugin! its really awesome!

When I tried to add an animation (show/hide) on Div with Slider the both jslider-value are stucked togather and not separate.

To see add this lines to demo:

-------- CSS
.showHide {display:none}
.open {display:block}

------- JS
jQuery(document).ready(function($) {
$("#trigger").click(function(){
if ($(this).next(".showHide").hasClass("open")) {
$(".showHide").slideUp(300);
} else {
$(".showHide").slideDown(300);
}
$(this).next(".showHide").toggleClass("open");
});
});

And wrapped #Slider3 with:

<a href="#" id="trigger">Show/Hide</a>  
<div class="showHide">

<div class="layout-slider">
  <input id="Slider3" type="slider" name="area" value="25;75" />
</div>

</div>

How can I fix it ?

Hi,
can you tell me if jslider supports multiple ranges - that is, not just multiple selectors but ranges between those selectors?

Thanks,

John K.

First of all, this is a great control!

Is it possible to allow the user to click on one of the tick marks and move the slider directly to that mark?

Also, is the undocumented "smooth" setting safe to use (it's not deprecated is it?)

Thanks

Пример

$(function() {
jQuery("#Slider1").slider({from: 10000, to: 100000, step: 1, smooth: false, round: 0, dimension: " руб", skin: "plastic",
    onstatechange : function( value ){
        MyUpdate(value);
    }
});
});
function MyUpdate(value) {  
    var split = value.split(';');
    $( "#pfrom" ).val( split[0] );
    $( "#pto" ).val( split[1] );
}
function MyUpdate2(option, min, max, type) {
    var idFrom  = "#pfrom";
    var idFromTemp  = $(idFrom).val();
    var idTo = "#pto";
    var idToTemp = $(idTo).val();
    $("#Slider1").slider("value", idFromTemp, idToTemp);
}

и HTML

    <div class="layout-slider" style="width: 100%">
      Slider <span style="display: inline-block; width: 400px; padding: 0 5px;"><input id="Slider1" type="slider" name="price" value="35000;70000" /></span>  in string
    <br />
    <input type="text" name="pfrom" id="pfrom" value="35000" onblur="MyUpdate2('price','0','100000','f');" /> 
    <input type="text" name="pto" id="pto" value="70000" onblur="MyUpdate2('price','0','100000','t');" />
    </div>

Получается так
в слайдере у меня значения 35,000 и 70,000
А в input полях 35020 и 70030

Если изменить 70030 на 71030 в input поле, то вместо результата 71030 мне возвращает 71020

Grettings,

How can you handle the event that runs when I stop moving the slide control and adjust the value to use, and so my form update automatically using the plugin?

Please help me on this question and i paste some code on it. http://stackoverflow.com/questions/12871401/egor-khmelev-jquery-slider-value-not-merging-or-changing
i not sure why the value is not merging or changing (the first pointer) is not response when the second pointer is moved from the value.

Is there any way to make the slider vertical?

Steps to reproduce:
#1. Create a slider with the following properties:

$("#Slider").slider({
from: -50,
to: 200,
step: 5,
dimension: '%',
skin: 'blue',
scale: ['-50', '|', '0', '|', '50', '|', '100', '|', '150', '|', '200']
});
#2. Load the page.
#3. Drag the left slider over "0" marker.

Actual Result:
Value label shows "%".

Expected Result:
Value label shows "0%".

Heterogeneity parameter causes weird results if the specified value is outside the range of the slider.

For example, if the range on a slider is [0, 100] and the heterogeneity parameter is given as ['50/200'], the slider goes from 0 to 200 to 100. I suggest filtering out the relevant heterogeneity parameters like so:

// adjust the heterogeneity parameter. Only keep values that fall in the available range
            for(i = 0; i < heterogeneity.length; i++) {
                var value = heterogeneity[i].split("/")[1];
                if(value <= maxValue && value >= minValue) {
                    heterogeneityCleaned.push(heterogeneity[i]);
                }
            }

Hi,

thanks for this great plugin. i've been working now at the first time with it and I have two improvement suggestions:

• I dont want to see the value over the knobs. I tried to disable the value in the class jslider-value" with $(".jslider-value").hide(); this does not work perfect. What do think about an additional option e.g. "valuevisible: true / false"?
• What about a vertical version?

thanks
chris

Would be nice to have the option for only show the handler label while dragging.
Possible?

I have an input with id "party_size". If I try to make a slider use that ID, it renders, but none of the javascript like dragging, etc don't work. If I change the ID to "partysize", everything works fine.

Для добавления строки прогресса, как та что между двумя указателями при "двойном" слайдере следует добавить лишь несколько строк кода. Я бы сделал pull request но не знаю толком как.

В файле /css/jslider.css удалить строку 39
В файле /js/jquery.slider.js после строки 393 добавить:

else
      this.o.value.css({ left: "0px", width: ( this.o.pointers[0].value.prc ) + "%" });

This is a great plugin.

I was wondering though, how do you make jquery.slider snap to increments? For example, I want to make a slider with values 1-10. I only want the slider to be placed on the integer values within the range. I don't want the slider handle to settle at a position between integer values. I didn't see such behaviour in the demos. Can it be done?

I love the plugin.

however, it does not work in internet explorer mobile. I am testing it on sdk emulator 7.1 which is "mango" and it does not work. I wish i could tell you more about why it does not work, but i am having some problems trying to get js errors.

If i get some i will share.

Thanks,
Brian

Thank You for sharing this great piece of software!!!

To support all these new touch user interfaces it would be cool if jslider would allow to have a pointer width, i.e. like this one:

http://jqueryfordesigners.com/demo/slider-gallery.html

1. Невозможно изменить лимит динамически. Даже переинициализация не помогает, а хотелось бы.
2. В событиях не хватает информации о том, какой ползунок был сдвинут - левый или правый.

Спасибо заранее

Its very nice to change value with slider('values', '2:10'), I tried to do same thing with limit but I am a bit lost in your Javascript code ;-(

Is is something planed or do you have any advice to achieve it ?

спасибо

Hi,
internet explorer 10 does not work.
works fine in compatibility view

Does it support 'snap to increments' like jquery ui slider ? ( http://jqueryui.com/demos/slider/#steps )

If you specify

{
from: -5
to: -100
}

the slider behaves as if it's stuck. this is for version 1.1.0-RELEASE. Thanks!

I'm using Trent Richardson's popular Timepicker GUI widget (https://github.com/trentrichardson/jQuery-Timepicker-Addon). It uses the slider function from jQuery UI (version 1.9.2) which appears to be rewritten in your plugin. I love your plugin and want to continue to use it but when I try to use both I get an TypeError in line 276 of your jquery.slider.js. The problem is a call to split() on apparently a non-string object.

Is there any way to avoid this? I really want to use your plugin but also be able to use at least Trent's plugin (ideally any of the plugins that use jQuery UI).

works fine in a windows Chrome, or Safari browser, and on an ipad but they wont move on either an asus transformer prime running ICS tried with opera, chrome beta, browser, and dolphin hd. also tried with the defualt browser on a 2.3.2 android phone mythouch g4. To double check it wasn't just my code I just checked your site and they don't slide.

if i change value of slider via settings

$("#product-buy-price-slider").slider("value"); // OUTPUT: "13000;17500"

// let's try to set first value 
$("#product-buy-price-slider").slider("value" , '12500');
// seems fine
$("#product-buy-price-slider").slider("value"); // OUTPUT: "12500;17500"

// let's try to set whole value
$("#product-buy-price-slider").slider("value" , '12500;16500');
// WHAT?
$("#product-buy-price-slider").slider("value"); // OUTPUT: ";17500"

if i change value directly bit .val() it will not trigger move of panels and will not set correct range

how to modify whole range value??

There is an issue when the minimum and maximum values are set by default both the maximum value of the slider.
The problem is that the maximum button is set by default above the minimum button which causes the issue that you can't slide the minimum button to the left, so the slider is stuck.

Hi,

I want to update the slider value at runtime depending upon the data returned by Json object? As per document,

(".Slider3").slider("value",p1, p2);

the data is not getting updated?

Please advise.

Thanks!

Hi!

I am trialing the use of the slider in Cognos 10.1 environment on a simple form with one entry field and one slider.
Note: This question is not related to Cognos, it is related to the slider behaviour.
The only issue so far is how to safely set a slider value after a page refresh based on a persistent value (within a text box which maintains state).

a) When the page is initialized, the slider functions ok (loads default value from the HTML section).

b) For each page reload a java script tries to update the slider value
jQuery("#Slider1").slider("value", someValue);
This action completely trashes the slider when it is called for the first time: the values are invalid, the slider displays the range 1 .. 10 and the value is set to 10.
c) if I now refresh the page again, the slider picks up correct values and works correctly.

To sum up, I have found a way for the slider to provide the desired functionality, but am wondering why is crashes when value is set to it via this function for the first time:
jQuery("#Slider1").slider("value", someValue);

I have also noticed that you need to set a value in the in order to correctly initialize the slider
<input id="Slider1" type="slider" name="price", value="50" /> // commented out so it displays in github

If I remove the value from the HTML element and set the value in the slider init section, then the slider is not correctly initialized.

and code

jQuery("#Slider1").slider({
    :
    value: "50",
    :

Thanks in advance, Alex Vesel