Great work! I’m interested in controlling the slider’s movement with buttons – i.e when the user clicks something the slider’s position moves to the left or right. Is it possible?

Firstly, I noted that $(“.selector”).slider() caused an error in that $.fn.slider is trying to returnValue.push( slider ) when the variable slider does not exist.
I have changed to returnValue.push( self ) which solves that issue.

Also I have added a redraw feature as I needed to change various settings, scales etc on other user events. Thought you might like.

case "redraw":
self.domNode.remove();
if(isDefAndNotNull(args[1])){
$.extend(true,self.settings,args[1]);
self.settings.interval = self.settings.to-self.settings.from;
}
self.create();
break;


Большое спасибо за такой хороший слайдер!

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

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.

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.

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?

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

Does that make sense?

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

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

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

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

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

Right?

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

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?

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!

Like this! It doesn’t work

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.

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

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

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

Thank you!

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

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

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

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

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?

Thanks!

-pete

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.

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

Dave