www.webdeveloper.com
Results 1 to 12 of 12

Thread: Jquery - slider and input box - update each others' values

  1. #1
    Join Date
    Sep 2004
    Posts
    23

    Jquery - slider and input box - update each others' values

    Hi,

    I've got a slider in jquery and I want it to populate an input box with a value as it is slid. I also want the user to be able to enter a value into the input box and for the slider handle to move to the appropriate position.

    I've found an example of the bare-bones slider in the jquery docs and some basic documentation, but I've no idea how to get it to do what I need, and can't find any simple, fully featured examples anywhere which do what I need.

    Can anyone suggest how to modify the following code to get me started?

    Code:
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#example").slider();
    	});
    </script>
    
    <div id="example" class="ui-slider-1" style="margin:10px;">
    	<div class="ui-slider-handle"></div>
    </div>
    <input type="text" class="slider-input" id="slider-input" />

    Thanks folks...

  2. #2
    Join Date
    Sep 2004
    Posts
    23
    Yay! Done part of it, but I can't seem to get the input element to change the slider handle location onblur. I can get the slider to change the value in the input box but not the other way round. It doesn't error, it just makes the handle go to zero on the slider on blur:

    Code:
    <script type="text/javascript">
    	var slider1Value		= 4;
    	var slider1Stepping		= 1;
    	var slider1Min			= 1;
    	var slider1Max			= 2500;
    
    	$(document).ready(function(){
    		$("#example").slider({
    			'stepping': slider1Stepping,
    			'minValue': slider1Min, 
    			'maxValue': slider1Max,
    			'startValue': [slider1Value], 
    			'slide': function(e, ui){ 
    				$('.slider-input').val(ui.value);
    			}
    		});
    		$('.slider-input').blur(function(){
    			var slider1Value = $(".slider-input").attr("value"); 
    			if(slider1Value >= slider1Min && slider1Value <= slider1Max){
    				$('#example').slider('moveTo',slider1Value);
    			}else{
    				alert('Please enter a value between '+slider1Min+' and '+slider1Max);
    				return false;
    			}
    		});
    	});
    </script>
    Can anyone see why this might be, and how to fix it?

    Thanks

  3. #3
    Join Date
    Mar 2005
    Posts
    767
    You have to convert the input's value from a string to a number first:
    Code:
    			var slider1Value = +this.value

  4. #4
    Join Date
    Sep 2004
    Posts
    23
    Hmm, that's not working:

    Code:
    <script type="text/javascript">
    	var slider1Value		= 4;
    	var slider1Stepping		= 1;
    	var slider1Min			= 1;
    	var slider1Max			= 2500;
    
    	$(document).ready(function(){
    		$("#example").slider({
    			'stepping': slider1Stepping,
    			'minValue': slider1Min, 
    			'maxValue': slider1Max,
    			'startValue': [slider1Value], 
    			'slide': function(e, ui){ 
    				$('.slider-input').val(ui.value);
    			}
    		});
    		
    		$(".slider-input").attr("value",slider1Value);
    		
    		$('.slider-input').blur(function(){
    			var slider1Value = +this.value; 
    			if(slider1Value >= slider1Min && slider1Value <= slider1Max){
    				$('#example').slider('moveTo',slider1Value);
    			}else{
    				alert('Please enter a value between '+slider1Min+' and '+slider1Max);
    				return false;
    			}
    		});
    	});
    </script>
    Can you spot the problem?

    Thanks Orc

  5. #5
    Join Date
    Mar 2005
    Posts
    767
    That works for me, but my HTML markup is probably different from yours. Do you have a test page online?
    Btw, you should better use the 'change' callback instead of the 'slide' callback or your script won't be notified when the user changes the value of the slider by clicking on it.

  6. #6
    Join Date
    Sep 2004
    Posts
    23
    A demo is here: http://www.iomi.net/test-slider.htm.

    The 'slide' callback needs to be like that really so that the user has feedback on what value they're sliding to. I tried changing it to 'change' but that then doesn't update the input box when you're sliding. For the UI it definitely needs to be the former.

    Thanks Orc

  7. #7
    Join Date
    Mar 2005
    Posts
    767
    Looks like you've got a different version of ui.slider.js. I'm using the one from this archive:
    http://code.google.com/p/jqueryjs/do...ry.ui-1.5b.zip

    Keep in mind jQuery UI is still beta software and some versions may work better than others.

  8. #8
    Join Date
    Sep 2004
    Posts
    23
    Yep, dodgy version of jquery UI. All sorted. Thanks again for your help...

  9. #9
    Join Date
    Apr 2008
    Posts
    3
    Quote Originally Posted by Orc Scorcher
    Looks like you've got a different version of ui.slider.js. I'm using the one from this archive:
    http://code.google.com/p/jqueryjs/do...ry.ui-1.5b.zip

    Keep in mind jQuery UI is still beta software and some versions may work better than others.
    Thank Orc Scorcher invaluable info. Looking into the generally avaible implementation its just... wrong

    ---

    Ruby on Rails tutorial

  10. #10
    Join Date
    Mar 2009
    Posts
    2
    hey guys!

    this worked really well for me.

    My only question is, my form field may already contain a value. Is there a way to make that value the starting value for the slider handle?

  11. #11
    Join Date
    Mar 2009
    Posts
    2

    Question

    Quote Originally Posted by bgnm2000 View Post
    hey guys!

    this worked really well for me.

    My only question is, my form field may already contain a value. Is there a way to make that value the starting value for the slider handle?

    I know this must be possible - I'm just too big of a javascript newb to figure it out. Anyone have any ideas?

  12. #12
    Join Date
    Nov 2011
    Posts
    1
    The code works like superb !!!!!!! But is it possible to input a value in texbox and the slider will move accordingly?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles