Question

<div id="slider"></div>

function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var w1 = 40;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var w2 = 40;
      var r2 = x2 + w2;

      if (r1 < x2 || x1 > r2) return false;
      return true;

    }

// // slider call

$('#slider').slider({
    range: true,
    min: 0,
    max: 500,
    values: [ 75, 300 ],
    slide: function(event, ui) {

        $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
        $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
        $('.price-range-both').html('<i>$' + ui.values[ 0 ] + ' - </i>$' + ui.values[ 1 ] );

        //

    if ( ui.values[0] == ui.values[1] ) {
      $('.price-range-both i').css('display', 'none');
    } else {
      $('.price-range-both i').css('display', 'inline');
    }

        //

        if (collision($('.price-range-min'), $('.price-range-max')) == true) {
            $('.price-range-min, .price-range-max').css('opacity', '0');    
            $('.price-range-both').css('display', 'block');     
        } else {
            $('.price-range-min, .price-range-max').css('opacity', '1');    
            $('.price-range-both').css('display', 'none');      
        }

    }
});

$('.ui-slider-range').append('<span class="price-range-both value"><i>$' + $('#slider').slider('values', 0 ) + ' - </i>' + $('#slider').slider('values', 1 ) + '</span>');

$('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider').slider('values', 0 ) + '</span>');

$('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider').slider('values', 1 ) + '</span>');

使用上面的滑块。使用下面的代码在jquery中设置值。当它在变质时，我要提醒它的价值。任何人都可以帮助我解决这个问题。 $（'。ui-slider-handle：eq（0）'）。append（''+ $（'＃slider'）。slider（'values'，0）+''）;

Answer 1

我认为您没有包含所需文件请链接文件

Css文件 https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.cs

脚本文件

https://code.jquery.com/ui/1.11.4/jquery-ui.js

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

＆＃13;

function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var w1 = 40;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var w2 = 40;
      var r2 = x2 + w2;

      if (r1 < x2 || x1 > r2) return false;
      return true;

    }

// // slider call

$('#slider').slider({
    range: true,
    min: 0,
    max: 500,
    values: [ 75, 300 ],
    slide: function(event, ui) {

        $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
        $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
        $('.price-range-both').html('<i>$' + ui.values[ 0 ] + ' - </i>$' + ui.values[ 1 ] );

        //

    if ( ui.values[0] == ui.values[1] ) {
      $('.price-range-both i').css('display', 'none');
    } else {
      $('.price-range-both i').css('display', 'inline');
    }

        //

        if (collision($('.price-range-min'), $('.price-range-max')) == true) {
            $('.price-range-min, .price-range-max').css('opacity', '0');    
            $('.price-range-both').css('display', 'block');     
        } else {
            $('.price-range-min, .price-range-max').css('opacity', '1');    
            $('.price-range-both').css('display', 'none');      
        }

    }
});

$('.ui-slider-range').append('<span class="price-range-both value"><i>$' + $('#slider').slider('values', 0 ) + ' - </i>' + $('#slider').slider('values', 1 ) + '</span>');

$('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider').slider('values', 0 ) + '</span>');

$('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider').slider('values', 1 ) + '</span>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="slider"></div>

＆＃13;

范围滑块获取值

1 个答案: