jQuery の UI Slider を使用して範囲スライダーを作成しようとしていますが、2 つのノブを一緒に動かす方法を知りたいと思っていました。たとえば、最小値が 0 で最大値が 100 の場合、これら 2 つの合計値は 60 を超えてはならないため、最初のノブが 10 の場合、もう一方は 70 まで行くことができます。いいえ、2 番目のノブを 80 に移動し、最初のノブを 20 に移動するにはどうすればよいかという問題があります。
どうもありがとうございました
function generate_slider(video_duration) {
start_duration = 0
end_duration = 60
if(video_duration < 60){
end_duration = video_duration;
}
$("#slider-range").slider({
range: true,
min: 0,
max: video_duration,
values: [start_duration, end_duration],
slide: function (event, ui) {
total_duration = (ui.values[1] - ui.values[0])
if (total_duration > 60) {
return false;
} else {
$("#amount").val("From: " + ui.values[0] + "sec" + " - To: " + ui.values[1] + "sec");
$("#total_amount").val("Selected:" + total_duration + " out of " + video_duration + " Sec");
}
$("#" + prefix + "hdn_duration").val(video_duration);
$("#" + prefix + "hdn_duration_total").val(total_duration);
$("#" + prefix + "hdn_duration_from").val(ui.values[0]);
$("#" + prefix + "hdn_duration_to").val(ui.values[1]);
}
});
$("#amount").val("From: " + $("#slider-range").slider("values", 0) + "sec" + " - To: " + $("#slider-range").slider("values", 1) + "sec" );
$("#total_amount").val("Selected:" + ($("#slider-range").slider("values", 1) - $("#slider-range").slider("values", 0)) + " out of " + video_duration + " Sec");
$("#" + prefix + "hdn_duration").val(video_duration);
$("#" + prefix + "hdn_duration_total").val($("#slider-range").slider("values", 1) - $("#slider-range").slider("values", 0));
$("#" + prefix + "hdn_duration_from").val($("#slider-range").slider("values", 0));
$("#" + prefix + "hdn_duration_to").val($("#slider-range").slider("values", 1));
}