基础6范围滑块错误

时间:2016-03-29 12:43:56

标签: javascript jquery html slider zurb-foundation

我使用Foundation 6为游戏社区创建网站,网站上的其中一项功能就是能够捐赠给服务器。

使用滑块选择捐赠金额,滑块应为1-10欧元。但是,您无法将滑块一直拖到10,它只是停在9。 如果我使用箭头键移动滑块手柄,或者通过更改滑块上方输入数字的值,我可以将滑块手柄移动到十。

这是一个显示错误的小gif

enter image description here

所有其他基础javascript插件似乎都按预期工作,滑块的代码如下:

<input type="text" id="sliderOutput2" style="margin-top: 2em;width:4em;margin-left: auto; margin-right: auto; text-align: center; font-weight: bolder;">
            <div class="slider" data-slider data-initial-start="5" data-start="1" data-end="10" data-decimal="0">
                <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
                <span class="slider-fill" data-slider-fill></span>
            </div>

顶部的输入是滑块值的直观表示。 此代码几乎直接来自Foundation文档(Foundation Range Slider Docs

上的示例

这是我所有的jquery / javascript链接

<script src="/js/vendor/jquery.min.js"></script>
<script src="/js/vendor/what-input.min.js"></script>
<script src="/js/foundation.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/jstz.min.js"></script>
<script src="/js/discord-widget.js"></script>
<script src="/js/forum-replyBox.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace( 'forumEditor', {
    qtWidth: '100%'
}); 
</script>
<script src="/js/registrationFormValidation.js"></script>
<script src="/js/hSlider.js"></script>
<script src="/js/playerCount.js"></script>
<script     src="http://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js">    </script>
<script src="/js/shoutbox.js"></script>
<?php if(!isset($_SESSION['timezone'])) echo '<script src="/js/updateTimezone.js"></script>';?>
<script src="/js/inlineSVGimg.js"></script>
<script type="text/javascript">
//removes all loading bars
$(window).on("load", function(){
    console.log($(".sk-cube-grid").remove());
});
</script>
<script type="text/javascript">
$('#dropdownmenu').on(
'show.zf.dropdownmenu', function() {
  var dropdown = $(this).find('.is-dropdown-submenu');
  dropdown.css('display', 'none');
  dropdown.fadeIn('fast');
});
$('#dropdownmenu').on(
'hide.zf.dropdownmenu', function() {
  var dropdown = $(this).find('.is-dropdown-submenu');
  dropdown.css('display', 'inherit');
  dropdown.fadeOut('fast');
});
</script>

如果您需要有关我实施Foundation框架的更多信息,请询问

提前致谢, 问候 丹尼尔霍尔斯特

0 个答案:

没有答案