Create a split scale slider for greater range.

A slider is a great way to constrain numeric input, but is limited by a linear range. You can either cover small ranges in detail, or larger ranges in bigger steps. A split scale slider can provide the best of both.

If you have never used a slider before, the howto Add a slider control to an edit menu or form covers the basic principles of creating and using a slider from a concrete5 block edit form or dashboard page.

When developing Backup Voodoo I needed a numeric input control that could range up to 1000, but still have increments of 1. For any numeric input I like to use sliders because, once set up, they are a self-validating input. A slider can't go out of range or return an illegal value. However, to get an input range of 0..1000 in steps of 1, a slider would have to be at least 1001 pixels long, way too big for the small area of a form I needed to fit the input control into.

For my application I only needed the fine control for small values. For larger values, I could accept larger increments. From this, I began thinking of a slider with a non-linear scale. At first I experimented with logarithmic scales, but the increments of a logarithmic scale were, by definition, always changing. Because they were not nice round values, logarithmic increments were awkward for the end users.

My solution was a split scale slider, where the first half of the slider runs from 0..100 in increments of 1, then the second half of the slider runs from 100..1000 in increments of 10. The maths works out that the 'halves' of the slider are not quite equal, but such a slider only needs 191 pixels width to cover a 0..1000 range.

First some base HTML. I won't bother with the php to output this, that is already explained in the beginner's slider howto. For now, the initial value is 100, but in a real input form that would be set from php.

<div class="slider_name_container" style="margin:20px">
  <input type="hidden" name="slider_name" class="slider_name" value="100">
  Slider value <span class="slider_name">100</span>
  <br>
  <br>
  <div class="slider_name" style="width:191px;"></div>
</div>

Now the jQuery to run the slider and split the scale. This will usually be wrapped within a ready handler or other form of closure.

  // Initial value of slider
  var sl_ini = parseInt($('input.slider_name').val(), 10);
  if (sl_ini > 100) {
    sl_ini = ((sl_ini - 100) / 10) + 100;
  }

  // function called by the slider to set the value in the form field
  var set_val_from_sl = function(sl_val) {
    if (sl_val > 100) {
      sl_val = (sl_val - 100) * 10 + 100;
    }
    $('span.slider_name').text(sl_val);
    $('input.slider_name').val(sl_val);
  };

  // set the slider running
  $('div.slider_name').slider({
    min: 0,
    max: 190,
    value: sl_ini,
    slide: function(event, ui) {
      set_val_from_sl(ui.value);
    }
  });

The slider actually has a range from 0 to 190. Returned values from the slider between 0 and 100 are translated as they stand. Returned values above 100 are scaled to range from 100 to 1000.

A similar method can be used for any split-scale slider, all you need to do is get the maths right. Conceptually, you could even develop this with further splits in the scale for multiple ranges.

Tags