jQuery UI Slider and output problem

paffley · 09-22-2012, 12:49 AM

Hi Guys,
I've come kinda stuck here, I'm needing the following slider to output to 2 seperate editboxes each with there own values.

Code:

$(function() {
		$( "#jQuerySlider" ).slider({
			value:1,
			min: 0,
			max: 5,
			step: 1,
			slide: function( event, ui ) {
				$( "#pages" ).val( "Pages" + ui.value );
			}
		});
		$( "#pages" ).val( "Pages" + $( "#jQuerySlider" ).slider( "value" ) );

		$( "#jQuerySlider" ).slider({
			value:149,
			min: 149,
			max: 349,
			step: 50,
			slide: function( event, ui ) {
				$( "#amount" ).val( "£" + ui.value );
			}
		});
		$( "#amount" ).val( "£" + $( "#jQuerySlider" ).slider( "value" ) );
	});

I would like, When the slider is moved, it will change the value of the editbox #amount & #pages together

All I can get this to do at the moment is change the #amount

I need both the values to change once the slider is moved.

Kind regards,

AndrewGSW · 09-22-2012, 01:42 AM

The first use of

Code:

$( "#jQuerySlider" ).slider ..

is over-written by the second use. I'm guessing you should have two separate sliders, #jQuerySlider1 and #jQuerySlider2. Otherwise, you should merge those two .slider() calls into one: how can one slider have two sets of min and max values?! Edited: You can, but they need effectively the same step.

Once you've resolved this you would then use code like this:

Code:

$( "#jQuerySlider" ).slider({
			value:1,
			min: 0,
			max: 5,
			step: 1,
			slide: function( event, ui ) {
				$( "#pages" ).val( "Pages" + ui.value );
                                $( "#amount" ).val( "£" + ui.value );
			}
		});

Added: To merge them you need to use the same number of steps, and do something like:

Code:

$( "#amount" ).val( "£" + ui.value *50 +  149);

paffley · 09-22-2012, 09:03 AM

Hi Andrew, Thanks for the reply

Ive looked at your suggestions and almost got it to work...

Code:

$( "#jQuerySlider" ).slider({
			value:1,
			min: 1,
			max: 5,
			step: 1,
			slide: function( event, ui ) {
				$( "#pages" ).val( "" + ui.value );
                                $( "#amount" ).val( "£" + ui.value *149);
			}
		});

This now makes both editbox values change but....the #amount value needs to be like this...

Code:

min: 149,
max: 349,
step: 50

Basically I need, #page steps to be 1-5 and the #amount steps to be 149,199,249,299,349 (149+50 for 4 steps)

Whats your thoughts? is this possible?

Kind regards,

AndrewGSW · 09-22-2012, 11:30 AM

Code:

Whats your thoughts? is this possible?

Not in this reality.

paffley · 09-22-2012, 12:25 PM

Ok Thanks

Kind regards,

xelawho · 09-22-2012, 03:32 PM

isn't it just

Code:

$( "#amount" ).val( "£" + (99 + 50*ui.value));

?

paffley · 09-22-2012, 03:40 PM

Quote:

Originally Posted by xelawho

isn't it just

Code:

$( "#amount" ).val( "£" + (99 + 50*ui.value));

?

Spot On! Thanks xelawho! perfect!

Kind regards,

AndrewGSW · 09-22-2012, 05:02 PM

Code:

Basically I need, #page steps to be 1-5 and the #amount steps to be 149,199,249,299,349 (149+50 for 4 steps)

Ahh, you sneakily dropped the min: 0 requirement in your original code

xelawho · 09-22-2012, 09:01 PM

... but wouldn't that just be

Code:

$( "#amount" ).val( "£" + (ui.value==0?0:(99 + 50*ui.value)) );

?

xelawho · 09-22-2012, 09:22 PM

in fact, the output prices don't need to have any mathematical consistency at all...

Code:

var prices=[0,34,99,862,10482,999999999];
$( "#slider" ).slider({
			value:1,
			min: 0,
			max: 5,
			step: 1,
			slide: function( event, ui ) {
				$( "#pages" ).val( "Pages" + ui.value );
					$( "#amount" ).val( "£" + prices[ui.value] );
			}
		});
	});

AndrewGSW · 09-22-2012, 10:07 PM

Code:

var prices=[0,34,99,862,10482,999999999];

This allows a price of 0 but the OP stated a minimum of 149. But anyway..

Although, £149 for zero pages sounds a bit steep

xelawho · 09-22-2012, 10:24 PM

the code in post #9 gives 0 for 0 pages and 149 for 1, 199 for 2, etc. Post 10 was just playing around. You could even take it further, and not worry where the minimum value starts...

Code:

var prices={40:34,80:99,120:862,160:10482}; 

...

$( "#amount" ).val( "£" + prices[ui.value] );

xelawho · 09-22-2012, 11:18 PM

... in fact, you don't even need to worry about creating objects because you can use the slider's own step property to divide the value back to array indices...

Code:

var prices=[2,34,99,862,10482,999999999];
$( "#slider" ).slider({
			value:9,
			min: 0,
			max: 15,
			step: 3,
			slide: function( event, ui ) {
				$( "#pages" ).val( "Pages" + ui.value );
					$( "#amount" ).val( "£" + prices[ui.value/$(this).slider("option","step")] );
			}
		});

I think I'm pretty much done milking this one now...