[jQuery UI]sliderを作成

ためしに、jQuery UIをスライダーマニュアルを参考に作成してみました。

chromeとIE8で正常動作しました。

ソースコードはめっちゃ単調。

<style>#slider_test001{width:200px;}</style> <div id="slider_test001"></div> <script>$(function() {$( "#slider_test001" ).slider();});</script>

オプションを使って、最大値(max)と最小値(min)を設定することもできます。

それぞれデフォルト値は、
最大値(max):100
最小値(min):0
となっています。

変更する場合は、

<style>#slider_test001{width:200px;}</style> <div id="slider_test001"></div> <script> $(function() { $( "#slider_test001" ).slider({ max:200, min:1 }); }); </script>

とする必要があります。
またスライド自身のデフォルト値が0なので、変更したい場合は、

<style>#slider_test001{width:200px;}</style> <div id="slider_test001"></div> <script> $(function() { $( "#slider_test001" ).slider({ max:200, min:1, value:33 }); }); </script>

とvalueキーに値を設定する必要があります。
ためしに、valueキーを設定した場合の実行結果を下に貼り付けます。