range-slider foundation 5 bug

Question

<div class="small-12 large-3 columns">
    {{ form_label(form_ad.price) }}
    <div class="hidden">
        <div class="range-slider round" data-slider data-options="start: 0; end: 500; step: 0.01; initial: 0; display_selector: #price;">
            <span class="range-slider-handle" role="slider" tabindex="0"></span>
        </div>
        <span id="price"></span>
    </div>
</div>

当我给出点击时，

我的range-slider-handle出现在前方位置的一半

任何人都知道为什么会发生这种情况？

Answer 1

我决定使用jQuery-ui

jQuery-ui range