jquery slider with variable width elements

Question

is it possible to create a jquery slider in which the elements have variable width (i.e. not all elements have the same width) ?

If so, how do I do that ? Hannit

Answer 1

Have you tried the Lemmon Slider?

http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php

Answer 2

To set the width of a jQuery slider just wrap it in a div and style using CSS. You can also reference the child elements through CSS to style those as well, but that has to be done using jQuery after they have been rendered.

Example:

<script type="text/javascript">
   $(document).ready(function(){
      //render the sliders
      $(".oSlider").slider({
         value: 12,
         min: 8,
         max: 24,
         step: 1
      });
      //size each handle according to class
      $(".narrow-handle .ui-slider-handle").css("width","10px");
      $(".wide-handle .ui-slider-handle").css("width","50px");
   });
</script>
<style type="text/css">
   /* define a width for the sliders by styling the wrapping div */
   .oSliderContainer { width:100px; }
   .oSliderContainer2 { width:200px; }
</style>

<div class="oSliderContainer"><div class="oSlider narrow-handle"></div></div>
<div class="oSliderContainer2"><div class="oSlider wide-handle"></div></div>

I hope that answers your question, good luck!