Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts

    jQuery UI Slider and output problem

    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,

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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);
    Last edited by AndrewGSW; 09-22-2012 at 01:51 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    paffley (09-22-2012)

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    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,
    Last edited by paffley; 09-22-2012 at 09:06 AM.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    Whats your thoughts? is this possible?
    Not in this reality.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    paffley (09-22-2012)

  • #5
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Ok Thanks


    Kind regards,

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    isn't it just
    Code:
    $( "#amount" ).val( "£" + (99 + 50*ui.value));
    ?

  • Users who have thanked xelawho for this post:

    paffley (09-22-2012)

  • #7
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    isn't it just
    Code:
    $( "#amount" ).val( "£" + (99 + 50*ui.value));
    ?
    Spot On! Thanks xelawho! perfect!



    Kind regards,

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    paffley (09-22-2012)

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... but wouldn't that just be
    Code:
    $( "#amount" ).val( "£" + (ui.value==0?0:(99 + 50*ui.value)) );
    ?

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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] );
    			}
    		});
    	});

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    Last edited by AndrewGSW; 09-22-2012 at 10:10 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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] );

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... 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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •