Question

enter image description here

如果我想在中心显示滑块上方的滑块怎么办？

在提供的图像中，我们可以看到输入框与滑块和滑块重叠。还有输入框的右上角和右上角。右下角没有边框半径。

是否可以进行这些自定义？

演示：http://jsfiddle.net/EWQ6n/572/

我这样做了

$(".ui-slider-input").wrap($('<div />').css({
    position : 'relative',
    display  : 'inline-block',
    height   : '36px',
    width    : '45px',
    overflow : 'hidden'
    top      : '2%',
    left     : '30%'

}));

Answer 1

顶部（顶部：'2％'）就像百分比一样，所以使用像素。高度和宽度也有问题，这就是为什么边界不在那里。我的屏幕很宽，框是居中的，所以调整（左：'46％'）百分比，使其居中，如果不是。

我为你做了一个演示。

http://jsfiddle.net/k7XAj/4/

<强>代码

$(".ui-slider-input").wrap($('<div />').css({
    position : 'relative',
    display  : 'inline-block',
    height   : '40px',
    width    : '70px',
    overflow : 'hidden',
    top      : '-30px',  
    left     : '46%'
}));

enter image description here

Answer 2

Wraping输入元素和滑块可以在不同的浏览器尺寸中获得更好的效果

演示：http://jsfiddle.net/EWQ6n/574/

$(".ui-slider-input").each(function(){

    $(this).css({
        position  : 'absolute',
        top      : '2%',
        left     : '30%',
        marginLeft: '-10px'
    })

     .add($(this).next()).wrapAll($('<div />').css({
        position : 'relative',
        paddingTop: '40px'
    }))
 });

Answer 3

感谢您的回复。实际上我想从文本框中删除那些上下箭头。终于找到了解决方案。

我只是隐藏了滑块附带的文本框，＆amp;插入一个新文本框，其值随着我们移动滑块而改变。

<input id="txtvalBox" type="text" value="" />

$("#points").change(function () {

    document.getElementById("txtvalBox").value = document.getElementById("points").value;
});

//points is the id of the slider

看到这个 HTTP：http://jsfiddle.net/Gk_999/mxzu5Ld3/

Jquery移动滑块定制

3 个答案: