blocks|key|484081|text|拿着你的jsfiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484082|HTML：|484083|<div+id="slider"></div>
<input+id="sliderValue"+/>|code-block|syntax|javascript|484084|CSS：|484085|#sliderValue{width:50px;}|offset|length|style|CODE|484086|Jquery：|484087|$(document).ready(function()+{


+//+Pris+slider
$("#slider").slider({value:'',min:+0,max:+150,step:+1,+range:+'min',
++++slide:+function(+event,+ui+)+{
++++++++$(+"#sliderValue"+).val(+ui.value+%2B+'+timer');
++++++++var+offset+=+$(this).find('a').css("left");
++++++++$("#sliderValue").css("margin-left",+offset);
++++}
});

++++$(+"#sliderValue"+).val($(+"#slider"+).slider(+"value"+));


});|484088|entityMap^0|0|0|0|0|0|P|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>Taking your jsfiddle.</p>

<p>HTML:</p>

<pre><code>&lt;div id="slider"&gt;&lt;/div&gt;
&lt;input id="sliderValue" /&gt;
</code></pre>

<p>CSS:</p>

<p><code>#sliderValue{width:50px;}</code></p>

<p>Jquery:</p>

<pre><code>$(document).ready(function() {


 // Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
    slide: function( event, ui ) {
        $( "#sliderValue" ).val( ui.value + ' timer');
        var offset = $(this).find('a').css("left");
        $("#sliderValue").css("margin-left", offset);
    }
});

    $( "#sliderValue" ).val($( "#slider" ).slider( "value" ));


});
</code></pre>


blocks|key|700008|text|您可以只使用：http://jsfiddle.net/z3xV3/21/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|700009|$(document).ready(function()+{
++++$("#slider").slider({
++++++++value:0,
++++++++min:+0,
++++++++max:+150,
++++++++step:+1,
++++++++range:+'min',
++++++++slide:+function(+event,+ui+)+{
++++++++++++var+offsetLeft+=+$(this).find(".ui-slider-handle").offset().left;
++++++++++++$(+"#sliderValue"+)
++++++++++++++++.val(+ui.value+%2B+'+timer')
++++++++++++++++.css({
++++++++++++++++++++"position":+"absolute",
++++++++++++++++++++"left":+offsetLeft
++++++++++++++++});
++++++++}
++++});
});|code-block|syntax|javascript|700010|每次移动句柄时都会调用slide回调：|700011|offsetLeft是句柄的偏移量。|style|CODE|700012|$(+"#sliderValue"+)是您的输入。|700013|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/z3xV3/21/^0|7|T|0|0|0|0|0|A|0|0|J|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|14|8|@$A|15|B|16|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|17|8|@$A|18|B|19|M|N]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>You can just:  <a href="http://jsfiddle.net/z3xV3/21/" rel="nofollow">http://jsfiddle.net/z3xV3/21/</a></p>

<pre><code>$(document).ready(function() {
    $("#slider").slider({
        value:0,
        min: 0,
        max: 150,
        step: 1,
        range: 'min',
        slide: function( event, ui ) {
            var offsetLeft = $(this).find(".ui-slider-handle").offset().left;
            $( "#sliderValue" )
                .val( ui.value + ' timer')
                .css({
                    "position": "absolute",
                    "left": offsetLeft
                });
        }
    });
});
</code></pre>

<p>The slide callback is called every time you move your handle:</p>

<p><code>offsetLeft</code> is the offset of the handle.</p>

<p><code>$( "#sliderValue" )</code> is your input.</p>


blocks|key|484269|text|下面是一个具有两个手柄的滑块的工作示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484270|​|484271|📷|atomic|offset|length|484272|484273|+++$('#slider').slider({
++++++++range:+true,
++++++++min:+500,
++++++++max:+10000,
++++++++step:+100,
++++++++values:+[1000,+2000],
++++++++slide:+function(+event,+ui+)+{
++++++++++++$('#min-price').html('$'+%2B+ui.values[0]);
++++++++++++$('#min_budget').val(ui.values[0]);
++++++++++++$('#max-price').html('$'+%2B+ui.values[1]);
++++++++++++$('#max_budget').val(ui.values[1]);
++++++++++++}

++++++++++++//move+labels+when+handles+are+moved
++++++++++++moveValueLabels();
++++++++}
++++});

++++//move+the+value+labels+directly+under+the+handles
++++function+moveValueLabels()+{
++++++++var+pos_first_handle+=+$('.ui-slider-handle:first').position();
++++++++var+pos_last_handle+=+$('.ui-slider-handle:last').position();
++++++++$('#min-price').css('left',+(pos_first_handle.left+-+($('#min-price').width()/2)));
++++++++$('#max-price').css('left',+(pos_last_handle.left+-+($('#max-price').width()/2)));
++++}

++++//set+initial+positioning+of+labels+when+page+is+loaded
++++moveValueLabels();|code-block|syntax|javascript|484274|CSS：|484275|#slider+{
++++overflow:+visible;
++++#min-price+{
++++++++position:absolute;
++++++++top:20px;
++++++++font-weight:+bold;
++++++++padding:0;
++++}
++++#max-price+{
++++++++position:absolute;
++++++++top:20px;
++++++++font-weight:+bold;
++++++++padding:0;
++++}
}|484276|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/66b8ca5269135d93da0cdc209b56288f.png|imageAlt^0|0|0|0|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|I|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

<p>Here is a working example for a slider with two handles</p>

<p><img src="https://i.stack.imgur.com/RuuC2.png" alt="enter image description here"></p>

<pre><code>   $('#slider').slider({
        range: true,
        min: 500,
        max: 10000,
        step: 100,
        values: [1000, 2000],
        slide: function( event, ui ) {
            $('#min-price').html('$' + ui.values[0]);
            $('#min_budget').val(ui.values[0]);
            $('#max-price').html('$' + ui.values[1]);
            $('#max_budget').val(ui.values[1]);
            }

            //move labels when handles are moved
            moveValueLabels();
        }
    });

    //move the value labels directly under the handles
    function moveValueLabels() {
        var pos_first_handle = $('.ui-slider-handle:first').position();
        var pos_last_handle = $('.ui-slider-handle:last').position();
        $('#min-price').css('left', (pos_first_handle.left - ($('#min-price').width()/2)));
        $('#max-price').css('left', (pos_last_handle.left - ($('#max-price').width()/2)));
    }

    //set initial positioning of labels when page is loaded
    moveValueLabels();
</code></pre>

<p>CSS:</p>

<pre><code>#slider {
    overflow: visible;
    #min-price {
        position:absolute;
        top:20px;
        font-weight: bold;
        padding:0;
    }
    #max-price {
        position:absolute;
        top:20px;
        font-weight: bold;
        padding:0;
    }
}
</code></pre>


blocks|key|700126|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|700127|<div+id="slider"></div>|code-block|syntax|javascript|700128|CSS：|700129|#slider+{
++++width:+200px;
}
#sliderValue+{
++++position:+absolute;
++++left:+0;
++++bottom:+-30px;
++++width:+40px;
}|700130|jQuery：|700131|$("#slider").slider({
++++value:+'',
++++min:+0,
++++max:+100,
++++range:+'min',
++++create:+function+(event,+ui)+{
++++++++$('.ui-slider-handle').append('<input+id="sliderValue"+/>');
++++},
++++slide:+function+(event,+ui)+{
++++++++$("#sliderValue").val(ui.value);
++++}
});|700132|http://jsfiddle.net/yBfTy/4/|offset|length|700133|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|15|8|@]|9|@$Q|16|R|17|1|18]]|A|$]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|P]]]]

<p>HTML:</p>

<pre><code>&lt;div id="slider"&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#slider {
    width: 200px;
}
#sliderValue {
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 40px;
}
</code></pre>

<p>jQuery:</p>

<pre><code>$("#slider").slider({
    value: '',
    min: 0,
    max: 100,
    range: 'min',
    create: function (event, ui) {
        $('.ui-slider-handle').append('&lt;input id="sliderValue" /&gt;');
    },
    slide: function (event, ui) {
        $("#sliderValue").val(ui.value);
    }
});
</code></pre>

<p><a href="http://jsfiddle.net/yBfTy/4/" rel="nofollow">http://jsfiddle.net/yBfTy/4/</a></p>


<p>I am trying to create a div that should follow the handler as it is seen here:
<a href="http://m1.dk/Priser/#tab:#calc,#abb" rel="nofollow noreferrer">http://m1.dk/Priser/#tab:#calc,#abb</a></p>

<p>My JSfiddle: <a href="http://jsfiddle.net/z3xV3/2/" rel="nofollow noreferrer">http://jsfiddle.net/z3xV3/2/</a></p>

<p>I also want to make a calculation on the UI value that should appear in the box.</p>

<p>Here is a illustration what I want to achieve: 
<img src="https://i.stack.imgur.com/mYXWA.png" alt="enter image description here"></p>

<p>HTML:</p>

<pre><code>&lt;div id="slider"&gt;&lt;/div&gt;
&lt;input id="sliderValue" /&gt;
</code></pre>

<p>Jquery:</p>

<pre><code>$(document).ready(function() {


 // Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
    slide: function( event, ui ) {
        $( "#amount" ).html( ui.value + ' timer');
    }
});

    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );


});
</code></pre>


Jquery UI slider how to make a box follow the handler?

jQuery

我正在尝试创建一个div，它应该遵循如下所示的处理程序：我的JSfiddle：我还想对应该出现在框中的UI值进行计算。下面是我想要实现的一个示例：​HTML：<div id="slider"></div><input id="sliderValue" />Jquery：$(document).ready(functio...

问Jquery UI滑块如何让框跟随处理器？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery UI滑块如何让框跟随处理器？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery UI滑块如何让框跟随处理器？
EN