That is a cute slider !

Awesome! Really nice plugin. I second (or third?) the request for the ability to set the slider position via the callback.

Thanks!!

This is a wonderful plugin, thank you for making it! It would be great if we could fix either the left or right pointers (make them not draggable). At present you can do this to fix the left pointer, but the pointer remains draggable until keyup and it jumps back into position:

callback: function(value) {
$(“#my_selector”).slider(“value”, 0)
}

Is there any other way to make the left or right pointer fixed?

@Mark I’m gonna add it into further version

Excellent Plugin!! I am also one who looked for changing the pointer values dynamically..

You have added in the New Features like,

“$(“.selector”).slider( “value”, opt_pointer1, opt_pointer2 ) — set values to pointers”

can you be more specific in this by adding some sample code here

Thanks

$(“.selector”).slider( “value”, opt_pointer1, opt_pointer2 )
works great! maybe i missed it when i read the page the first time. thanks again!

Hi again, Is there a way to have the colored section show from the left side of the bar to the pointer in one pointer sliders? Right now, no color portion shows up in single pointer sliders and I think this option would be very cool for those sliders to help show what you are selecting. Thanks again, Mark

@mark, Good idea.
@Karthick, For example $(“.selector”).slider( “value”, 20000, 50000 ) — set 20000 value for first pointer, set 50000 value for second pointer. $(“.selector”).slider( “value”, null, 40000 ) — keep the first pointer, set 40000 value for second pointer.

Egor, your work is excellent and I owe you a great THANKS I never found time and motivation to learn javascript myself and recently I needed to add a new visual component to Wicket framework to represent user preference… Your slider turned out to be an excellent choice.
I found another interesting feature of this update (maybe someone will find it useful): if you need the slider to “snap to ticks”, just add this code:
callback: function(value) {
$(“#my_selector”).slider(“value”, value);
}
I use a slider with one pointer, this would not work with two pointers, because the function cannot determine which pointer fired the callback.

nice collect it to http://ajax.wespai.com

Отличный плагин – то, что доктор прописал, но в аптеках не было.
Спасибо.

I am using jQuery Slider along with jQuery Draggable and Droppable. But the problem is my draggable is not working because of jquery slider.
Please reply.

For two sliders if you want snap to step values use

callback: function( value, pin ) {
var z = value.split(“;”);
$(“#Slider3″).slider(‘value’, z[0], z[1]);
}

Hello, Egor

I tryed out this plugin.
This plugin is quite a functional and beautiful plugin!!

I have a question about this plugin.
I am developing commmercial web site.
Can I use this plugin for commercial web site?
Does this plugin have any lisences?

The only problem I have is using it with a touch screen like the iPhone and the ipad.
It is completely unusable with these devices, which is s crying shame because this is a great plugin.

My customers are already asking for this. It’s only going to increase from here.

Hi Egor,
Very nice plugin. I was wondering if there is a possibility that you can make some kind of of sample demo of how i can use your slider to create something like this form: http://psdtemple.com/
I really would like to create a couple sliders of you in a form that automatic calculate a price. Is that possible? I am no coder at all. Maybe you could contact me to have a word about this. I am really interested in it.

Thanks,
Dave

It was my intention to wrap my above link as a code, so the link wasn’t clickable. Could you change this Egor? Thanks Hope to receive a reply of you soon regarding me question above.

Dave

Really awesome plugin, Egor. I’m am using this in a project right now. As soon as the website is online I’ll post a link. You did a great job there. I really like that you paid attention to little details. If I would have to make one point for improvement it would be to try and get rid of the table and try solve it with CSS. I’m sure you have good reasons for using a table and I can certainly live with it so don’t spend to much time on that. All in all a big thank you.

Just to apprise you all of the iPad/iPhone/iPod status of this latest build.

I’ve tested this latest update on my iPad and it working well.
This is the only slider I know that works on the touch screen to date.
Great job Egor!

Because of the small screen and fat fingers, you might consider larger slider handles option.
It can be a little frustrating.

Thanks much!
Jeff

I love the slider. I have one question. Could a “snap to” feature be added that allows for snapping the slider to the step value. For instance, if you have from 1 to 10, with step of 1, could it snap the slider to each step value between the min and max? Seems like a logical addon. Thanks

Here is a bit of code to enable snapping to steps as an option.

Find the settings object on line 441 and add:
snap: true,

Then, depending on your needs, add the following code to the mouse event functions in jSiderPointer. For instance, in onmouseup on line 936, I added:
if(this.parent.settings.snap == true){
var percentage = this.parent.valueToPrc(this.parent.getValue(), this);
this._set( percentage );
}

Hope this helps others.

Is there anyway to set specific values instead of a range? Such as: values: [1, 5, 18, 300, 1500]

Thanks!

-pete

Egor,

Great slider. There is one important usability issue, and one functional feature I’d like to address.

Firstly, and most importantly, the slider is unusable on mobile platforms because it does not allow for the slider to be moved by clicking on the slider bar. This would be similar in nature to the scrollbar on this web page. Without this fix, this slider cannot reliably be used on any site where we might expect to have visitors on the iPhone/iPad/iPod or Androind platforms.

Secondly, it would be great to be able to place upper and lower limits so that the sliders could never touch eachother. This could be accomplished in one of two ways:
1) Pass an integer that tells the slider to stop sliding once the handles get within a certain distance of oneanother.
2) Pass two integers, one for the higher handle, and one for the lower handle, that would prevent the high handle from going any lower – and the low handle from going any higher – than the set limits.

Your thoughts?

@Saxony, another way to obtain “snap to steps”.
Firstly, find the settings object on line 441 and add, to enable snapping to steps as an option:

snap: true,

then add the following code around line 959 on the “calc” function, before return x;

if(this.settings.snap==true){
  var n=100/((this.settings.to - this.settings.from)/this.settings.step)
  x = Math.floor(x/n + 0.5)*n;
}

A simple way to disable/enable the slider (fix both pointer):
add this option in settings (around line 441)

disabled: false,

add this “case” on switch (around line 420)

case "disabled":
   self.settings.disabled=args[1];
   break;

and add this line (around line 936) as first line of the function onmousemove

if(this.settings.disabled == true)return;

in this way is possible at runtime enable/disable the slider

$("#Slider").slider("disabled", true);

Hope this helps others
byez

Any idea on how to change “Skin” setting so that we could customize each pointer with a different skin?

Otherwise, maybe something like that would work?

$(‘.jslider’).each(function() {
$(‘.jslider-pointer:first’, this).addClass(‘my-new-jslider-pointer-first’);
$(‘.jslider-pointer:last’, this).addClass(‘my-new-jslider-pointer-last’);
});

All the sliders have a horizontal orientation. Is there any way to vertically orient it.

I would also like to see minimum value at the bottom and max value at the top

Perfect slider, thanks! Отличный слайдер, спасибо.

You should definitely add:
{
dimensionPosition: before,
thousandsDelimiter: ‘,’,
fractionDelimiter: ‘.’
}
to get £10,001.23 or something like this.

Thank you!

Thanks guys for your comments and pieces of code. Sure I will add this in further version.
@Saxony and @ davide thanks!
@Sergey Yakunin Yes, this is a good advice. However, you can do this by “calculate” function.
@Abhijeet Sorry, there are no way. I’m thinking about it.

Hi, does anyone have problems with this very nice plugin in IE7? It works fine in firefox version 3.6.3 but i have some slider interface issues in IE7.

When i set the sliders pointer values (using $(“.selector”).slider( “value”, opt_pointer1, opt_pointer2), the ‘dimention(s)’ doesn’t render correctly…?

Can you please advise?

——
aQuila

cute slider, nice work:)

Contrary to earlier posts recommending hacking the source for the slider, I was able to get the slider to “snap” to each increment simply by adding “smooth: false” to the options.

jQuery(“#mySlider”).slider(
{
from: 0,
to: 100,
step: 5,
smooth: false, // Makes the cursor ’snap’ to increments of 5.
});

Is it (would it be) possible to add more than two pointers in one slider? I’m looking for something like that and I can’t find.

Has there been any progress on the “click the slider track to change value” feature? Instead of just dragging the slider, it would be great to click on the track and have the slider go to that position. For mobile users definitely, plus a lot of users tend to do that instinctively. Thanks!

First, the bug when two pointers are at the right of slider range. There was nothing you can do with that. So, this is really important.

Well I was solved like that: when both sliders get margin of same (min,max) interval I was increse z-index for that slider pointer that is from oposite limit of interval.
If both go on max then min slider have incresed z-index, and same thing for min.

Hi,i’ve a short question. It seems that it ins’t possible to set a “slide” or “change” function.

Like this! It doesn’t work

@Markus check documentation here: http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/

Oh YES. Thats it. Thank you!

Ok another GREAT question. Sorry i’m a jQuery and Javascript-Beginner

In this “callback-function” i need the value of the first slider and the second slider on MouseUp. How did i get the values?

Thank you so much for your help!

Ok the answer i can read in the comments!

This Plugin is realy realy fantastic !!!!

Hi Egor,
i need your help again

I have 2 Sliders:

Slider 1

$('#aufl_slide_1').slider({
jQuery("#aufl_slide_1").slider({
from: 1,
to: 10,
scale: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
limits: false,
step: 1,
smooth: false,
dimension: ' MP',
skin: "round",
callback: function(value1) {
alert(value1);
}
});


Slider 2

$('#aufl_slide_2').slider({
jQuery("#aufl_slide_2").slider({
from: 1,
to: 10,
scale: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
limits: false,
step: 1,
smooth: false,
dimension: ' MP',
skin: "round",
callback: function(value2) {
alert(value1);
alert(value2);
}
});


In Slider 2 i need the value of Slider 1.
Look at “alert(value1);”.
Is this possible?

@Markus You have to look at “New features” part

$(“.selector”).slider( “value” ) should be helpful.

Yes i have read this but i absolutly don’t know what to do with this or where to place it.

Ok i think it works like this:

In the second Slider after:
callback: function(value2) {

I had to put:
var testss = $(“#aufl_slide_1″).slider(“value”);
alert(testss);

Right?

Hello Egor,

next Question
It is possible to use only one Pointer? A slider with only one pointer not hiding one of them.

Отличный плагин. Огромное спасибо за работу.

Egor, great great slider!!

I tried to do a prc slider, 0-100 like so (very basic)

jQuery(“#Slider”).slider(‘prc’, 0, 1000);

But the slider will only go from 1 – 10 confused? Any help would be greately appriciated.

Pete

Thanks for the tip, got it!

jQuery(“#Slider”).slider( {from: 0, to: 100, step: 1, smooth:true, skin:”round”} );

Been playing with this, I know alot of people have said that clicking on the slider to change position would be good. What about, a small text field after the slider where you could put in a value? This may be benificial both on full size websites as people could put in the exact amount they want, but also on mobile devices, some screens are just to small to make the slider “work”, if there were a text field next to it, you would be able to input via the keyboard the number you want, and then have the slider move to that point?

Does that make sense?

Thanks for this slider,

I have some problems to move the handler in one ipod. The touch is selected but is not possible to move the selectors.I use range 2 selectors. Same page is working in ff.Could you see please. Regards

Touch:The mobile problem is linked to mousemove event in Dragable class. No touchmove,touchstart event is subcribed on init for handlers(the Addlisteners are there but not working like need), one alert in onmouse is never fired. Adding one external document touchmove and touchstart listener you can move the slider but need some extra work. Selected and moving the handler are cumulatives.The first move and later first and the second… Could you make some test.thanks.

Slider works great on the iPad, I have a question, I have multiple sliders on one page, there all prc, I am trying to show a total at the bottom, but the input numbers are turned into an object, when I try to add them it just puts them next to each other, not addition.

Is there a value somewhere that is the actual number so that I could add them together? to show total % combination of all sliders positions?

Great piece of software!

Like others here asked, is there a way to make the slider track ‘clickable’ so that the pointer would jump there without having to drag it along. That seems like standard functionality and most people expect sliders to behave this way.

Thanks.

I am so close to having this do what I want!

http://www.rightcoastracing.com/work/iPad/createModel.html

I think this will be my last question, as you can see on the site, I have two sliders, and text fields after them that display the %, and a total at the bottom.

I am trying to be able to put a number in the text field next to the slider and have it jump to it.

I have tried this…

function submitonEnter(evt, value){
var charCode = (evt.which) ? evt.which : event.keyCode
if(charCode == "13"){
y = parseInt(value);
alert ("enter hit, value : "+value)
$('#Slider2').val(y);
}
};

and it is getting the event and the value, but doesn’t update the slider. And again thank you so much, this script has saved me countless days, I am new to jQuery and js.

Hi guys,

I’m trying to place custom html elements (bookmarks) on top of the actual slider. Any ideas on how to achieve that ?

I tried appending divs to the table cell but it doesn’t seem to be working out …

Thanks