jquery-ui - jQuery スライダーでドラッグ可能な範囲

Question

私が尋ねた質問には多くの答えがありますが、完全な新しいラッパーを作成するよりもjquery.ui.slider.jsレベルで実行できるものが必要です。

しかし、現在、davidpadbury のこのプロトタイプ コードは、最新バージョンの jquery.ui.slider では機能しません。

davidpadburyのバージョンから最新のスライダー バージョンへの多くの変更があります。

Answer 1

スライダーで勝負！完全に機能していませんが、良いスタートです。

---

    <script type='text/javascript' src='../js/jquery.js'></script>

    <script type='text/javascript'>
    $(document).ready( function() {
            $(".slider").each( function() {
                    var $knob = $("<div></div>").addClass("slideKnob");
                    $knob.mousedown( function() {
                            this.dragging = true;
                    } );
                    $("<div></div>")
                            .addClass("slideBar")
                            .append($knob)
                            .insertBefore( this );

                    $(this).toggle( false );
                    $knob[0].inp = this;
                    $knob[0].dragging = false;

            } );

            $(document).mouseup( function() {
                    $(".slideKnob").each( function() { this.dragging = false; } );
            } );

            $(document).mousemove( function( e ) {
                    $(".slideKnob").each( function() {
                            if( !this.dragging ) return;
                            var lef = e.pageX - $(this).parent().offset().left - 7;
                            var min = $(this.inp).attr("min");
                            var max = $(this.inp).attr("max");
                            var step = $(this.inp).attr("step");

                            if( step != 0 ) {
                                    var rstep = 184 * step / (max - min);
                                    lef = rstep * Math.round( lef / rstep );
                            }
                            lef = Math.min( 184, lef );
                            lef = Math.max( 0, lef );
                            $(this).css( "left", lef );

                            var val = step * Math.round( (max - min) * lef / (184 * step) );
                            val = Math.round( val * 1000 ) / 1000;

                            $(this.inp).attr( "value",  val );
                            console.log( val );
                    } );
            } );
    } );
    </script>

    <style type='text/css'>
    .slideBar {
            width: 200px;
            height: 20px;
            border-style: none solid;
            border-width: 1px;
            border-color: #BBB;
            position: relative;
    }
    .slideKnob {
            position: absolute;
            width: 14px;
            height: 14px;
            border: 1px solid #444;
            top: 2px;
            cursor: pointer;
    }
    </style>

    <input class='slider' min=0 max=1 step=.1></input>
    <input class='slider' min=100 max=1 step=0></input>

Answer 2

jQuery UI Slider の拡張は既に行われています。ここからコードを引き出すことができます