Хороший плагин. Но сильно не хватает возможности смены позиции бегунка при клике на шкале. Сможете реализовать?

Hello,

It is a very good jQuery slider plugin, thank you very much!

The only one feature I missed is a possibility to change slider position by clicking on scale.. Hope this will be available in next versions.

Wishes,
Eugene

Thank you for your reply Vladimir and Eugene, I’m going to do it soon.

This is really cool. The only thing I’d suggest is that you consider using type=range, rather than your non-standard type=slider. That way–you’d have a cross-browser html5 range input.

Excellent work.

@Mike Taylor That is good idea

Great effect. I will use it on my real estate portla, thanks!!!

It is very useful and usable on real estate websites

Feels very robust, click and leave impartial from cursor position and no trouble to drag the different thumbs. I like the merge of the tooltip and the hiding of the labels very much, too.

Good work, keep it on.

An idea, maybe its already possible, can you handle time selections with this? Example showing a user 8:00 AM to 5:00 PM and allowing them to select start/end times for a particular event.

thank you very much for this jQuery Slider plugin. It’s a very precious plug in even without changing the slider position just by clicking on scale…great job!

Really nice plugin, good job!

i need a slider for 1day, 1week and 30 days.
can i achieve it using this plugin? please advise.

please add callback function…

How to fetch the value of pointer in a hidden field when pointer is moved?

@Jatin I think you can use it, I don’t see any problems with that

@gf @Mauzzam I’ve updated slider, now there two new functions, callback and onstatechange. Thank you for your replies.

Egor,

i am able to get 1 to 30 days now. How to get selected value? how to use onstatechange event?

@Jatin .slider{ …, onstatechange: function( value ){ /*actions*/ }, … }
if you just want to get final state — better to use callback event, it is the same usage like onstatechange

like this?

jQuery(“#SliderSingle”).slider({
from: 1,
to: 30,
step: 1,
round: 1,
scale: [1, '|', 8, '|', '15', '|', 23, '|', 30],
limits: false,
dimension: ‘  day’,
skin: “blue”,
onstatechange: function(value) {
alert(value)
}
});

@Jatin yes, however, I think you don’t need round param here… because with your “round: 1″ you will see like “23,0 day”, this value set how much symbols after comma, default round is zero.

in firefox3.5.5
bug?
When adjusted to the maximum value, the value cannot be changed.

@gf send me example with that bug on my email. I see all right there…

@Egor

I sent you mail. pleaze see it,

Aha, after a while of scratching my head, I figured out what “heterogeneity” is:

The heterogeneity value defines a series of points along the slider and the output value of the slider at those points, allowing you to tinker with how the output of the slider changes as you move the knob. The “percentage” is how far along the slider the point is — the X value. The “value of place” is the Y value at that X. Between the points, the output is linear with the input, but if you add enough points, you can make the output approximate a curve.

I wrote this “calculate” function before I figured heterogeneity out. It’s a little smoother if you’re just trying to do a graduated scale, but it’s hard-coded for 0-3000 with a 5-point step, and it requires more computation in the user’s browser:

calculate: function(value)
{
// This is a little bit “artistic.” Using an exponential to make the low
// end move more slowly and the high end move more quickly, so it’s
// easy to select $5, $10, $15, $25, but the scale can still go up to
// $3000. The *600 followed by ceil() followed by the *5 provides
// rounding to the nearest $5.
// Caveats: We boost value to speed up low end (and the same boost
// overall to prevent values beyond 100%)
var lowendbooster = 600;
return Math.ceil(
Math.pow( ( value + ( value == 0 ? 0 : lowendbooster ) )
/ ( 3000 + lowendbooster ),
5 )
* 600
) * 5;
}

Great plugin. I’ll use it on my monthly reports
Keep going

Thank you.

Is it possible to split the two range values in to seperate boxes when js is disabled?
Not a huge problem but would be easier for people to understand how to input values if they have js disabled.

@JS sure, you can use noscript tag in html in this case. I don’t see any problems with that.

God job!!
That is good idea

Hi,
How can I set initial positions for the two pointers?

@ Siju As you can see in sources — you should write you initial states in input’s value attribute, for example <input … value=”10″ … /> (one pointer slider) or <input … value=”10;20″ … /> (two pointers slider)

Thanks Egor Khmelev, for your quick response.
regards
Siju

Hi,

Very good piece of code. But is there a way to dynamically (i.e. by ajax call) change value of settings ?
I would like to be able to change the “to” value, depending on some other element.
I tried to redeclare my jQuery(‘#myelement).slider({to: newvalue});
but it draws another slider… any help ?

Man, that’s awesome. I liked it very much. …. But I can’t find a use for it
Maybe it’ll be included into my CMS called DotPlant.

@Guillaume Sorry, but there are no way now to do it, but I will try to add this as soon as possible. So keep looking for updates here.

@Bethrezen It would be great

Great plugin!!! Just one little question, is there anyway possible to change the offset of the cursor values? I would like them to be right over the bar, and not over the cursor…. any ideas?

how could i make it static ? i need it to unable the possibility to change the slider position in some of cases, any ideas ? thx !

@JuanPablo Its possible to cahnge by jslider.css, string 21, margin-left value have to be 0. but its a bit strange result

@kikos the faster way I see its put some semi-transparent or full transparent block right over slider. there are no another ways now.

Hi Egor

Thanks for this great work!
I’m trying to get (“#Slider1″).val() to calculate things live on the page but it returns an empty string when the pages load, whereas once the slider has been clicked, it returns the correct value from the hidden tag…

(I use jquery 1.2.6, the framework uses it, I cannot use 1.3.2 for now, don’t know if this can be the problem)

i second Guillaume’s request.
i will use a work around until then.

Brilliant plugin by the way. I will be using it in my next project.

thank you for your contribution.

This worked for me when wanting to change options dynamically.

first remove it.
$(“span.jslider”).remove();

Then re-Load it.
$(“#Slider1″).slider(options);

This will fulfill Guillaume’s request until something better comes along.

I’m busting my head to figure out how to get the callback to identify which slider on the page fired it without having to create a different callback for every slider.

Usually you get a reference to the object that fired the event.
example: this.id
But I’m not seeing any such reference here.

Am I wrong?

@jeff You could simply inspect slider object by firebug in your callback function: console.dir( this ); to find that this.inputNode — reference to jquery object of you input and catch id like this.inputNode.attr(‘id’);

@egor
I actually found this on my own by pouring through the source code.
But I wish I had seen this earlier as I spent a couple hours trying to figure this out.

Right now, this does everything I need it to do. The customer is very pleased.
I am thrilled.

Thanks much for your contribution. You have an excellent plugin here.

Hi.

First I’d like to say that this slider-function is superb.

But still theres is a function I miss:
$(#SingelSlider).slider(‘MoveTo’, 30);

Is there a function to update the slider outside the slider?
By that I mean; is there a function to call to update the slider and move the knob?

Thanks, K

@Ken Sorry, there are no way now. But it is very interesting idea to interact with slider. I’ll send you an email when update it.

Really nice look and purpose, i’m going to use it, for sure.
But i’m still a beginner with jquery. Is there a way catch the initial value, just after initialization, before the user interact with the plug-in ?

The purpose is to get an ajax builded slider and being able to figure it’s value out even if the user submits it without interacting.
Perhaps an afterinit : function () {} ?

Just noticed a little bug : Increase the right cursor’s value up to its maximum and release it. Then, incrase the right cursor to the same value of the other (both on maximum) and release it too…
Now, try to change the value of any, you can’t anymore.

I see two work around :
- change the z-order, puting above the cursor which is on the wrong side (i mean the left above when it’s on the right side)
- A more pleasant beavour would be that, when one cursor reach the other one, it pushes the other further and, when they reach a side, they can’t take the same value.

amazing plugin
I’m using it on a Wordpress theme I’m working on, within theme settings (to visually change page column sizes).

there’s just a small glitch that makes the scale inaccurate with certain scale values, like a 960 grid system in my case.

the fix is to replace var prc = Math.round((((100/(s.length-1)))*10)/10);
with var prc = (((100/(s.length-1)))*10)/10;
and on the line below, (i*prc) with Math.round(i*prc)

thanks!

Nice plugin. Any consideration to allow for both horizontal and vertical placement.

cheers

I eaw one very impressive jQuery slider with many JS’s in it that I can’t and don’t now how to brake it. It is very, but very important for me to make one – JUST ONE -like that. Is there anyone nice, polite and knowledgeable to help me with it. i can even pay few bucks mfor help. But seriously people – very pretty and I really need it. Thanks

Minor Bug!!!!

I have really much impressed from this slider its really fantastic.
But there is a minor bug in it.

“When we set the both slider on the extreme right side its difficult to take them back.”

thanks 4 accepting my request

Could anyone help me with my problem? I have three sliders which are interrelated. When I adjust one slider higher, the other two sliders should adjust downward. I understand how to make the calculation using onstatechange, but how do I reference an existing slider and update the position of the pointer?