jqueryスライダの現在の値を表示する方法

Question

この例では、どのようにスライダの現在の値を表示しますか？ refreshSwatchを、しかし、ここhttp://api.jqueryui.com/slider/#option-valueドキュメントに記載されているように、まだ使用$("#coloredSlider").slider("option", "value");

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>

Answer 1

を動作しません：私はスライドの下にスライド機能を追加しようとしています。