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屋！