범위 슬라이더 값 받기

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에서 설정됩니다. 나는 그것이 chenging 할 때 가치를 알려달라고했다. 누구든지 solvr = e this로 나를 도울 수 있습니까? $ ('ui-slider-handle : eq (0)') append (''+ $ ('슬라이더)') 슬라이더 ('값', 0) + '');

Answer 1

는 당신이 필요한 파일이 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>

,312,937 파일 파일을

CSS 파일을 링크하세요 포함하지 않은 것으로 생각