0

I have a JQuery Range Slider that works but I need the page to be responsive, so I've had to do another range slider to medium view. When I resize the window manually and the window gets to medium size view, the slider obviously doesn't pick up the values of the slider in the large view. Is this possible?

Here is my code:

<div class="large-12 medium-4 small-12 columns">
  <div class="wrapper-range">
    <div class="slider-range1" id="slider-range1"></div>
   </div>
    <div class="values">
        <input type="text" id="amount-min1" class="input-value min-value amount-min1" readonly>
        <input type="text" id="amount-max1" class="input-value max-value amount-max1" readonly>
    </div>
</div>

<div class="medium-4 columns aside-medium">
  <div class="wrapper-range">
    <div class="slider-range1" id="slider-range1-medium"></div>
  </div>
  <div class="values">
    <input type="text" id="amount-min1" class="input-value min-value amount-min1" readonly>
    <input type="text" id="amount-max1" class="input-value max-value amount-max1" readonly>
  </div>
</div>
<script>
$(function() {
  $( ".slider-range1" ).slider({
    animate: "fast",
    range: true,
    min: 0,
    max: 500,
    values: [ 0, 500 ],
    create: function( event, ui ) {
      $(".ui-slider-handle").show();
      $(".ui-slider-handle").css("background",'url("assets/images/handler-03.png") 50% 50% no-repeat');
  },
    slide: function( event, ui ) {
      $( "#amount-min1" ).val( ui.values[ 0 ] + "€"  );
      $( "#amount-max1" ).val( ui.values[ 1 ] + "€"  );
      $(".ui-slider-handle").show();
      $(".ui-slider-handle").css("background",'url("assets/images/handler-03.png") 50% 50% no-repeat');
    }
  });

  $( ".amount-min1" ).val( $( "#slider-range1" ).slider( "values", 0 ) + "€");
  $( ".amount-max1" ).val( $( "#slider-range1" ).slider( "values", 1 ) + "€");
});
</script>
08Dc91wk
  • 4,254
  • 8
  • 34
  • 67
David Soler
  • 219
  • 6
  • 22
  • Why using 2 different sliders? Why not make size of 1 slider change for medium/normal view? Also, you can't re-use IDs. `amount-min1` and `amount-max1` have both been duplicated. – enhzflep Jul 06 '15 at 05:58
  • Yes. I think is not a good idea to have two silders...I don't think is possible both sliders have the same values. I was checking just in case. Thank you. – David Soler Jul 06 '15 at 08:04
  • But what I would like to know is if I have the chance to create two sliders at the same time using a class as a selector i.e. $(".slider-range").slider({}) and if it should work ok. Sorry for my ignorance – David Soler Jul 06 '15 at 14:32
  • Yes indeed - you can use two sliders at once, differentiating between the two with class-based css selectors. You may for instance, have 2 sliders - one for normal view and another for a different layout. You could then give each of them classes which styled them. You could then add another class, lets say 'active'. you could assign this to the appropriate slider. This would then let you (a) hide the one not currently used and (b) target the one that is for value extraction. something like ".slider-range1 .active". :) – enhzflep Jul 08 '15 at 01:47
  • enhzflep that seems a good solution, but I don't imagine how could I change the class active depending on the view. I think that would solve my problem very efficiently. – David Soler Jul 08 '15 at 15:15
  • Well then, another possible solution would be to have a rule in each css file that set `display: none` on the slider that the css file doesn't apply to. You could then differentiate between the shown slider and the hidden one by getting their dimensions. A hidden element will have a `.clientWidth` and `.clientHeight` values of 0. So, you could get the list of sliders, then iterate through them to find the one with non-zero dimensions. This will be the one shown and the one whose current value you're interested in. Depending on your use, you may need the `FormData` object. :) – enhzflep Jul 09 '15 at 01:06

0 Answers0