Question

在此示例中，您将如何显示滑块的当前值？我试过在幻灯片下添加一个幻灯片功能：refreshSwatch，但仍无法正常工作

function getTheColor( colorVal ) {
    var theColor = "";
    if ( colorVal < 50 ) {
        myRed = 255;
        myGreen = parseInt( ( ( colorVal * 2 ) * 255 ) / 100 );
    }
    else {
        myRed = parseInt( ( ( 100 - colorVal ) * 2 ) * 255 / 100 );
        myGreen = 255;
    }
    theColor = "rgb(" + myRed + "," + myGreen + ",0)"; 
    return( theColor ); 
}

function refreshSwatch() {
    var coloredSlider = $( "#coloredSlider" ).slider( "value" ),
    myColor = getTheColor( coloredSlider );
    $( "#coloredSlider .ui-slider-range" ).css( "background-color", myColor );
    $( "#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default" ).css( "background-color", myColor );
}

$(function() {
    $( "#coloredSlider" ).slider({
        orientation: "horizontal",
        range: "min",
        max: 100,
        value: 0,
        slide: refreshSwatch,
        change: refreshSwatch
    });
});

body {
    font-family: Arial, Helvetica, sans-serif;
}
#coloredSlider {
    float: left;
    clear: left;
    width: 600px;
    margin: 15px;
}
#coloredSlider .ui-slider-range { 
    background: #ff0000; 
}

#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default {
    background: none;
    background-color: #FFF;
}

<p>A Colored jQuery UI Slider</p>
<div id="coloredSlider"></div>

Answer 1

使用文档中http://api.jqueryui.com/slider/#option-value所述的$( "#coloredSlider" ).slider( "option", "value" );。

如何显示jquery滑块的当前值

1 个答案: