[jQuery UI] 基本メモ: Slider – 端くれプログラマの備忘録

サンプルコード

スライダーの動きに併せてプログレスバーを変化させてみる。

<div id="bar" style="width:200px"></div>
<div id="slider" style="width:200px"></div>

1 2	<div id="bar" style="width:200px"></div> <div id="slider" style="width:200px"></div>

$('#bar').progressbar({
    value: 0,
})
$('#slider').slider({
    slide: function(event, ui) {
        console.log(ui.value);
        $('#bar').progressbar('option','value',ui.value);
    }
})

$('#bar').progressbar({

value: 0,

})

$('#slider').slider({

slide: function(event, ui) {

console.log(ui.value);

$('#bar').progressbar('option','value',ui.value);

}

})

参考サイト

Slider | jQuery UI
https://jqueryui.com/slider/

サンプルコード

参考サイト

関連記事