jquery-ui滑块句柄完成位置左100％-将其放置在滑块外部 [英] jquery-ui slider handle finish position is 100% left - placing it outside the slider

问题描述

我第一次使用jQuery-ui滑块，并为一个相当基本的问题感到困惑.设置滑块时，我希望不使用主题.当我从左向右滑动时，滑块手柄的右手位置步进1超过滑块的宽度.这是由于滑块css将手柄向左定位:100％.我注意到许多其他人在使用滑块时没有遇到任何困难，但是看不到他们如何解决此问题.
问题演示
我想我缺少了一些令人尴尬的基本知识，很想知道什么.
非常感谢

I am using jQuery-ui slider for the first time and am confused by a rather basic issue. When setting my slider, I wish to do so without using a theme. When I slide from left to right, the right hand position of the slider handle steps 1 handle width past the slider. This is due to the slider css positioning the handle with left: 100%. I note many many other people using the slider without any difficulty, but can't see how they are getting round this issue.
Demo of issue
I assume I am missing something embarrassingly basic and would love to know what.
many thanks

推荐答案

对此进行了更多的了解，似乎滑块设计为以上述方式操作，但手柄向左偏移了50％其宽度.因此，条形图的中心表示值-完全有意义(当滑块表示值时).
要将滑块用作滚动条，只需将滑块包裹在div中，该div左右左右分别填充滑块宽度的50％.我已经更新了我的演示以反映这一点.
如果有人有更好的解决方案，而无需额外的div，我希望看到它.

Having read a bit more into this, it seems that the slider is designed to act in the way described, but with the handle offset to the left by 50% of its width. Thus the centre of the bar denotes to value - which makes total sense (when the slider denotes a value).
To use the slider as a scrollbar simply wrap the slider in a div which is padded left and right with 50% of the slider's width. I've updated my demo to reflect this.
If anyone has a better solution, without needing the extra div, I would like to see it.

这篇关于jquery-ui滑块句柄完成位置左100％-将其放置在滑块外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！