Jquery-ui-slider가 최대 값과 최소값을 같은 값으로 설정하지 못하도록합니다.

가격에 최소값과 최대 값을 설정할 수있는 선택기에 jquery-slider를 사용하고 있습니다.Jquery-ui-slider가 최대 값과 최소값을 같은 값으로 설정하지 못하도록합니다.

내 문제는 가망 맥스와 같은 값의 최소값 선택을 설정할 수 있다는 점이다.

이 문제를 방지 할 수있는 방법이 있나요?

플러그인의 모든 가능한 옵션 매개 변수를 읽었으며 플러그인을 편집하지 않고도이 문제를 해결할 방법이없는 것으로 보입니다. https://jqueryui.com/slider/#range

$(function() { 
 
    $("#slider-range").slider({ 
 
     range: true, 
 
     min: 0, 
 
     max: 500, 
 
     values: [ 75, 300 ], 
 
     slide: function(event, ui) { 
 
     $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
 
     } 
 
    }); 
 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
 
     " - $" + $("#slider-range").slider("values", 1)); 
 
    });

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Slider - Range slider</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    
 
<p> 
 
    <label for="amount">Price range:</label> 
 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
    
 
<div id="slider-range"></div> 
 
    
 
    
 
</body> 
 
</html>

출처

2017-02-06 Yannjoel

과 같이

이 솔루션은 다음을 추가했다 당신의 도움이

편집 여기

예와의 standart 슬라이더 주셔서 감사합니다 코드 slide:

if(ui.values[ 0 ] +19 >= ui.values[ 1 ]){ 
     return false; 
    }

또한 다음 코드

$(function() { 
 
    $("#slider-range").slider({ 
 
     range: true, 
 
     min: 0, 
 
     max: 500, 
 
     values: [ 75, 300 ], 
 
     slide: function(event, ui) { 
 
     if(ui.values[ 0 ] +19 >= ui.values[ 1 ]){ 
 
      return false; 
 
     } 
 
     $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
 
     } 
 
    }); 
 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
 
     " - $" + $("#slider-range").slider("values", 1)); 
 
    });

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Slider - Range slider</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    
 
<p> 
 
    <label for="amount">Price range:</label> 
 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
    
 
<div id="slider-range"></div> 
 
    
 
    
 
</body> 
 
</html>

에서 테스트 할 수 있습니다

출처

2017-02-21 16:35:14 Yannjoel

Jquery-ui-slider가 최대 값과 최소값을 같은 값으로 설정하지 못하도록합니다.

답변

관련 문제