Menu icon Foundation
Range sliders and <select> problem

I've been using range sliders and I display the value in input field. this works fine. but I have to use it with select as well, and somehow this is something I coud not achieve. Any similar issues or tips on how to do it?
My issue here is : how to make slider display its value in .selectpicker?

<div class="input-wrap">
    <select class="selectpicker">
        <option>6</option>
        <option>12</option>
        <option>18</option>
        <option>24</option>
        <option>30</option>
        <option>36</option>
        <option>42</option>
        <option>48</option>
        <option>54</option>
        <option>60</option>
        <option>66</option>
        <option>72</option>
    </select>
</div>

<div class="slider-wrap">
    <div class="range-slider" data-slider data-options="display_selector: .selectpicker; initial: 72; start: 6; end: 72; step: 6;">
        <span class="range-slider-handle" role="slider" tabindex="1"></span>
        <span class="range-slider-active-segment"></span>
    </div>
</div>
            

         

range sliderselect

I've been using range sliders and I display the value in input field. this works fine. but I have to use it with select as well, and somehow this is something I coud not achieve. Any similar issues or tips on how to do it?
My issue here is : how to make slider display its value in .selectpicker?

<div class="input-wrap">
    <select class="selectpicker">
        <option>6</option>
        <option>12</option>
        <option>18</option>
        <option>24</option>
        <option>30</option>
        <option>36</option>
        <option>42</option>
        <option>48</option>
        <option>54</option>
        <option>60</option>
        <option>66</option>
        <option>72</option>
    </select>
</div>

<div class="slider-wrap">
    <div class="range-slider" data-slider data-options="display_selector: .selectpicker; initial: 72; start: 6; end: 72; step: 6;">
        <span class="range-slider-handle" role="slider" tabindex="1"></span>
        <span class="range-slider-active-segment"></span>
    </div>
</div>
            

         
Jovan Petrovic over 4 years ago

If anyone has similar issue, here is the way to resolve it: I just removed display_selector: .selectpicker from the above code and did some jQuery action:

 jQuery('.range-slider').on('change.fndtn.slider', function () {
    setValue();
 });

jQuery('.selectpicker').change(function() {
  var slider = jQuery('.range-slider');
  var num = jQuery(this).val();
  slider.foundation('slider', 'set_value', num);
});

function setValue() {
  var slider_value = jQuery('.range-slider').attr('data-slider');
  jQuery('.selectpicker').val(slider_value);
}