jquery - JqueryUIスライダーの値に応じて変化する追加のテキストボックス

Question

0から100までのjqueryUIスライダーがあり、デフォルトの開始は50です。スライダーからのユーザーの値に応じて3つの異なるオプションのいずれかを印刷する追加のシンプルなテキストボックスをどのように作成するのか疑問に思いました。基本的に、範囲が0〜33の場合、テキストボックスは読み取り（Easy）、34〜66の範囲の場合は読み取り（平均）、67〜100は読み取り（Hard）になります。

これは現在私のコードです：

<script> 
$( ".slider3" ).slider({
animate: true,
range: "min",
value: 50,
min: 0,
max: 100,
step: 1,

//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#slider-result3" ).html( ui.value );
},

});
</script>

私はこれを何時間も理解しようとしてきたので、助けてください。

Answer 1

スライド メソッドの ui.value で if を実行するだけです。

if (ui.value <= 33)
    $( "#slider-input3" ).val( "easy" );
else if (ui.value <= 66)
    $( "#slider-input3" ).val( "average" );
else
    $( "#slider-input3" ).val( "hard" );

例については、このjsfiddleを参照してください。