How to (dynamically) connect big number of sliders to input-field(s)?

since this page seems to be THE reference (besides the official jquery documentation), when it comes to advanced jquery questions, i gonna post my question here. I have an ajax-form with up to 80(!) sliders, basically its working fine. there are some sliders though, having a range from 0 to 500, which is a lot of steps, especially, as the height of the slider is only about 90px. You can imagine, that it can be quit an act to move the slider to a certain value, sometimes its nearly impossible.

So i want to additionally giving the opportunity to enter the value开发者_高级运维s via input field. Do you have any idea, how to realize this, maybe even without having to generate 80 inputs? my idea would be something like, clicking the particular handle and the input-field will get the value transmitted to. This should work without problems, but how to have the connection "reversed", so if you enter a value into the input-field, it will be transmitted to the handle?

Thanx in advance, this is a great site...

Maschek

You can use the .change()^docs event of the input box, and call the value^docs method of the slider to update it.

$('#your_input_id').change(function(){
                      $('#slider_id').slider('option','value',this.value);
                  });

example http://jsfiddle.net/gaby/MXZGE/ (the yellow value is updatable)

Here's some code I developed a little while ago for just this situation. I have an attribute in the input called 'data-controlled-by' that is set to the same value as the div in which the slider is initialized. For instance, I have this in my html:

<div id="slider-1" data-controls="slider-1-slider-blah"></div>
<input name="whatever" data-controlled-by="slider-1-slider-blah" />

In my js, I'd initialize the slider first like this:

$("#slider-1").slider({
  min: 0,
  max: 20,
  value: $("input[data-controlled-by='slider-1-slider-blah']").val(),
  slide: sliderUpdateInput,
  stop: sliderUpdateInput
});

Notice the sliderUpdateInput callback function above, used in both the slide (while the user is sliding) and the stop (when the user stops sliding) events. Here's how that looks:

function sliderUpdateInput(e,u) {
  var slider = $(u.handle).parent();
  var controlled_input = $('input[data-controlled-by="' + slider.attr('data-controls') + '"]');
  if( u.value <= slider.slider('option', 'min') )
    controlled_input.val('');
  else
    controlled_input.val(u.value);
}

Then, on the input that you want to be updated, you'd add a keyup handler, like this:

$('input[name="whatever"]').keyup(function(e) {
  var slider = $("div[data-controls='" + $(this).attr('data-controlled-by') + "']");
  var slider_min = slider.slider('option', 'min');
  var slider_max = slider.slider('option', 'max');

  // left or down
  if( e.keyCode == 37 || e.keyCode == 40 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_min )
      $(this).val( parseInt( $(this).val() ) - 1 );
    $(this).select();
  }
  // right or up
  else if( e.keyCode == 39 || e.keyCode == 38 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_max )
      $(this).val( parseInt( $(this).val() ) + 1 );
    $(this).select();
  }

  if( !isNaN( parseInt($(this).val()) ) )
    slider.slider('value', parseInt( $(this).val() ) );
  else
    slider.slider('value', slider_min );
});

Update: further explanation

Notice the keycodes that are checked here for up/right and down/left. This is so the user can just nudge the slider by 1 in either direction. This is especially useful for when the input is at a 3-digit value, like 255.

It's truly my hope that this helps you out and spurs your learning! Comment with any questions, please! In the selector of the keyup event handler, you can specify anything that will get you all of your inputs that you wish to be controlled by/can control the sliders.

i did some minor modifications, now its working with one single input-field for all sliders. Heres what i did: In the function "sliderUpdateInput" i added the line "document.getElementById("whatever").setAttribute("data-controlled-by", this.id);". then to the input field added the id="whatever". Now only thing to take care is, that in the sliders attribute "data-controlled-by" the value is the same as the id of the slider, so you can apply to it in the function "sliderUpdateInput" with this.id. So the value of the input-attribute will be changed to the corresponding slider, each time you click or drag the slider.

If you want to display all the inputs for each slider anyway, you wont need this, but in my script there was no room for all that inputs, so i thought it was better, to only use one input anyway, to have it a bit more dynamic.

Thanks for your solution, i especially like how the value of the input corresponds with the slider in realtime.