CSS jquery ui滑块样式

jquery ui slider Styling

提问by Jonah

I'm trying to style a value within a jquery ui range slider handle.

我正在尝试在 jquery ui 范围滑块句柄中设置一个值的样式。

I'm using this DEMO

我正在使用这个演示

Plus I've used this CSS and it's still not working. Where am I going wrong?

另外，我已经使用了这个 CSS，但它仍然无法正常工作。我哪里错了？

<div class="demo">
    <div id="slider-vertical" class="sliderControl-label v-labeCurrent"></div>
</div>

.sliderControl-label {
    color: #CCCCCC;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: -10px;
}

.ui-slider-handle .sliderControl-label .v-labelCurrent {
    color: #777777;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    text-shadow: 0 1px 0 #FFFFFF;
    top: -2px;
    transition: color 0.15s linear 0s;
}?


$(function(){
    $("#slider-vertical").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle .sliderControl-label .v-labelCurrent').text(v);
        }
    });    
});?

I'm getting my self in a right CSS mess.

我让自己陷入了正确的 CSS 混乱。

采纳答案by Jonah

Ok, I have fixed this. Thank you for your help guys. My issue was me not declaring the class of the value in the javascript.

好的，我已经解决了这个问题。谢谢你们的帮助。我的问题是我没有在 javascript 中声明值的类。

$(this).find('.ui-slider-handle').html('<div class="value-label">'+ui.value+'</div>'); 

By Declaring this line, I could then style the value inside the handle. Cheers

通过声明这一行，我可以设置句柄内的值的样式。干杯

回答by MikeM

use .ui-slider .ui-slider-handleas your CSS selector (and declare these styles below the jQuery UI CSS file).

使用.ui-slider .ui-slider-handle作为你的CSS选择器（和申报jQuery UI的CSS文件下面这些样式）。

example jsfiddle

示例 jsfiddle

.ui-slider .ui-slider-handle {
    width:2em;
    left:-.6em;
    text-decoration:none;
    text-align:center;
}

回答by Adam Tomat

If you only want to style that number in the handle all you need to do is target the .ui-slider-handlelike so: jsfiddle:

如果您只想在句柄中设置该数字的样式，您需要做的就是定位.ui-slider-handle如下：jsfiddle：

.ui-slider-handle {
    color: #777777;
    font-size: 10px;
    padding: 3px;
    text-shadow: 0 1px 0 #FFFFFF;
    text-decoration:none;
}