Two jquery ui sliders in one scheme

Question

I have already implemented a jQuery UI range slider with two handlers

My JS code:

$(function() {
                $( "#slider-range" ).slider({
                    range: true,
                    min: 16,
                    max: 99,
                    values: [ 30, 60],
                    slide: function( event, ui ) {
                        if (ui.handle.nextSibling) {                         
                            setTimeout(calculatePos,5);
                            function calculatePos(){
                                $( "#start" ).html( ui.values[ 0 ]).position({
                                    my: 'center',
                                    at: 'top-15',
                                    of: $('.ui-slider-handle:first')                                    
                                });   
                            }                          
                        }
                        else {
                            setTimeout(calculatePos,5);
                            function calculatePos(){                              
                                $( "#end" ).html( ui.values[ 1 ]).position({
                                    my: 'center',
                                    at: 'top-15',
                                    of: $('.ui-slider-handle:last')                                    
                                });                                                  
                            }
                        }       
                    }
                });
              });

Now, I'd like to embed into that a new slider with just one handle which would navigate between 16 and 99, too. Namely, I will have three bullets. Is it possible to achieve that and having in one scheme two functionalities? If yes, how?

Answer 1

I think this may help you do what you want to do. I didn't have your HTML or CSS, so I just used the jQuery UI Demo as a base.

Working Example: https://jsfiddle.net/Twisty/uw132d6m/3/

HTML

<div class="wrapper">
  <div id="start">
  </div>
  <div id="end">
  </div>
  <div id="slider-range-1" class="low">
  </div>
  <div id="slider-range-2" class="high"></div>
</div>

CSS

.wrapper {
  position: relative;
}

#start,
#end {
  position: absolute;
  font-size: 0.65em;
}

.low {
  position: absolute;
  top: 20px;
  width: 100%;
}

div#slider-range-2.high {
  position: absolute;
  top: 20px;
  border: 0;
  background: transparent;
}

.high .ui-slider-handle {
  width: 10px;
}

JavaScript

$(function() {
  function calcWidth() {
    var $h1 = $("#slider-range-1 .ui-slider-handle:eq(0)"),
      $h2 = $("#slider-range-1 .ui-slider-handle:eq(1)");
    var w = $h2.position().left - $h1.position().left;
    return w - 36;
  }

  function moveLeft($selector) {
    $selector.position({
      my: "left top",
      at: "right+11 top+5",
      of: "#slider-range-1 .ui-slider-handle:eq(0)"
    });
  }

  $("#slider-range-1").slider({
    range: true,
    min: 16,
    max: 99,
    values: [30, 60],
    slide: function(event, ui) {
      if (ui.handle.nextSibling) {
        setTimeout(calculatePos, 5);

        function calculatePos() {
          $("#start").html(ui.values[0]).position({
            my: 'center',
            at: 'top-15',
            of: ".low .ui-slider-handle:eq(0)"
          });
          moveLeft($("#slider-range-2"));
          $("#slider-range-2").slider("option", "min", ui.values[0]);
          $("#slider-range-2").width(calcWidth())
            .slider("option", "max", ui.values[1]);
        }
      } else {
        setTimeout(calculatePos, 5);

        function calculatePos() {
          $("#end").html(ui.values[1]).position({
            my: 'center',
            at: 'top-15',
            of: ".low .ui-slider-handle:eq(1)"
          });
          $("#slider-range-2").width(calcWidth())
            .slider("option", "max", ui.values[1]);
        }
      }
    }
  });
  $("#slider-range-2").slider({
    min: $("#slider-range-1").slider("values", 0),
    max: $("#slider-range-1").slider("values", 1),
    create: function(e, ui) {
      moveLeft($(this));
      $(this).width(calcWidth());
    }
  });
});

The second slider is positions to fit between the two range handles. If the range handles are moved, the second slider is adjusted to fit, You can adjust the min , max , or step options in the same manner if needed.

I suspect you will need to adjust a few of the offsets for handle sizes etc in your own code.