Menu icon Foundation
How to use range slider

Hi, I am trying to create range slider but all I get is a single handle that cannot be moved.
No JS errors, nothing. I tried to run jQuery(document).foundation() just in case but no change.

<div data-options="{&quot;slider&quot;:true,&quot;start&quot;:0,&quot;end&quot;:1000,&quot;step&quot;:10,&quot;initialStart&quot;:0,&quot;initialEnd&quot;:1000,&quot;doubleSided&quot;:true,&quot;binding&quot;:true,&quot;decimal&quot;:0}" id="edit-price-16" class="price-range number-range-element label-invisible slider" data-drupal-selector="edit-price">
    <div class="field-label"><label class="visually-hidden" for="edit-price--16">Price</label></div>    <span aria-controls="edit-price-from" tabindex="1" role="slider" data-slider-handle="" class="slider-handle"></span>
    <span data-slider-fill="" class="slider-fill"></span>
    <span aria-controls="edit-price-to" tabindex="2" role="slider" data-slider-handle="" class="slider-handle"></span>
    <div class="hide"><div class="js-form-item form-item js-form-type-price form-item-price-from js-form-item-price-from form-no-label input-group">
    


    


    


            <div class="input-group-field">
        <input type="number" max="1000" min="0" step="10" value="0" name="price[from]" id="edit-price-from" data-drupal-selector="edit-price-from" class="range-from-value form-price form-number">

            </div>
    


            <span class="input-group-label">€</span>
    


    
    


    </div>
<div class="js-form-item form-item js-form-type-price form-item-price-to js-form-item-price-to form-no-label input-group">
    


    


    


            <div class="input-group-field">
        <input type="number" max="1000" min="0" step="10" value="1000" name="price[to]" id="edit-price-to" data-drupal-selector="edit-price-to" class="range-to-value form-price form-number">

            </div>
    


            <span class="input-group-label">€</span>
    


    
    


    </div>
</div>
</div>
            

         

Filterbroken

F6slider

Hi, I am trying to create range slider but all I get is a single handle that cannot be moved.
No JS errors, nothing. I tried to run jQuery(document).foundation() just in case but no change.

<div data-options="{&quot;slider&quot;:true,&quot;start&quot;:0,&quot;end&quot;:1000,&quot;step&quot;:10,&quot;initialStart&quot;:0,&quot;initialEnd&quot;:1000,&quot;doubleSided&quot;:true,&quot;binding&quot;:true,&quot;decimal&quot;:0}" id="edit-price-16" class="price-range number-range-element label-invisible slider" data-drupal-selector="edit-price">
    <div class="field-label"><label class="visually-hidden" for="edit-price--16">Price</label></div>    <span aria-controls="edit-price-from" tabindex="1" role="slider" data-slider-handle="" class="slider-handle"></span>
    <span data-slider-fill="" class="slider-fill"></span>
    <span aria-controls="edit-price-to" tabindex="2" role="slider" data-slider-handle="" class="slider-handle"></span>
    <div class="hide"><div class="js-form-item form-item js-form-type-price form-item-price-from js-form-item-price-from form-no-label input-group">
    


    


    


            <div class="input-group-field">
        <input type="number" max="1000" min="0" step="10" value="0" name="price[from]" id="edit-price-from" data-drupal-selector="edit-price-from" class="range-from-value form-price form-number">

            </div>
    


            <span class="input-group-label">€</span>
    


    
    


    </div>
<div class="js-form-item form-item js-form-type-price form-item-price-to js-form-item-price-to form-no-label input-group">
    


    


    


            <div class="input-group-field">
        <input type="number" max="1000" min="0" step="10" value="1000" name="price[to]" id="edit-price-to" data-drupal-selector="edit-price-to" class="range-to-value form-price form-number">

            </div>
    


            <span class="input-group-label">€</span>
    


    
    


    </div>
</div>
</div>
            

         

Filterbroken
Brian Tan over 3 years ago

Problem with "decimal". "0" is not allowed.The minimum it will work is "1". Probably a bug. Also "step" is not implemented yet.

Also, I think data binding for second handle is not working yet as of 6.0.4