范围滑块获得价值 [英] Range slider getting value

问题描述

<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>');

Am使用上面的滑块.该值是使用以下代码在jquery中设置的. 我希望在价格不断上涨时发出警报.谁能帮我解决这个问题. $('.ui-slider-handle:eq(0)').append(''+ $('#slider').slider('values'，0)+'');

Am using the above slider.The value is setting in jquery using below code. I ned to alert the value when it is chenging. Can anyone help me to solvr=e this. $('.ui-slider-handle:eq(0)').append('' + $('#slider').slider('values', 0 ) + '');

推荐答案

我认为您尚未包含必需文件，请链接文件

I think that you have not included the Required Files Please Link the files

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

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>');

<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>

这篇关于范围滑块获得价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！