可変幅要素を持つjqueryスライダー

Question

要素が可変幅を持つ（つまり、すべての要素が同じ幅を持つわけではない）jqueryスライダーを作成することは可能ですか？

もしそうなら、どうすればいいですか？ Hannit

Answer 1

jQueryスライダの幅を設定するには、CSSを使用してdivとスタイルにラップします。子要素をCSSで参照してスタイルを設定することもできますが、レンダリング後にjQueryを使用して行う必要があります。

例：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //render the sliders 
     $(".oSlider").slider({ 
     value: 12, 
     min: 8, 
     max: 24, 
     step: 1 
     }); 
     //size each handle according to class 
     $(".narrow-handle .ui-slider-handle").css("width","10px"); 
     $(".wide-handle .ui-slider-handle").css("width","50px"); 
    }); 
</script> 
<style type="text/css"> 
    /* define a width for the sliders by styling the wrapping div */ 
    .oSliderContainer { width:100px; } 
    .oSliderContainer2 { width:200px; } 
</style> 

<div class="oSliderContainer"><div class="oSlider narrow-handle"></div></div> 
<div class="oSliderContainer2"><div class="oSlider wide-handle"></div></div> 

私はあなたの質問、幸運に答え願っています！

Answer 2

レモンスライダーを試しましたか？

http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php