jquery - 根据 Jquery UI Slider 值更改的附加文本框

Question

我有一个从 0 到 100 的 jquery UI Slider，默认开始是 50。我想知道如何创建一个额外的简单文本框，该文本框根据来自 Slider 的用户值打印 3 个不同选项之一。基本上，如果范围在 0-33 之间，则文本框将显示为（简单），如果范围为 34-66，则显示为（平均），而 67-100 将显示为（困难）。

这是目前我的代码：

<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

您只需要在 slide 方法中的 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。