javascript - 如何显示jQuery滑块的当前值

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

http://codepen.io/anon/pen/obWzaQ

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>

最佳答案

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

关于javascript - 如何显示jQuery滑块的当前值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37357569/