根据Jquery UI Slider值更改的其他文本框

Question

我有一个jquery UI Slider，从0到100，默认开始是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

你只需要在幻灯片方法的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。