我们可以使用JQuery UI的价格范围滑块值与输入文字

我使用的是Jquery UI price range slider这是完美的工作，但我想价格与输入文本的价值，这将是可编辑的。我们可以使用JQuery UI的价格范围滑块值与输入文字

任何人都可以做到吗？

如果有人有任何其他插件或自定义代码& suggesstion然后请分享。

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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> 
 
    <script> 
 
    $(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)); 
 
    }); 
 
    </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-07-27 Rohit Verma

你可以只添加一个文本框，并具有价值的影响滑块 – Luca

你去那里。将onchange事件绑定到输入，删除readonly就是这样。

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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> 
 
    <script> 
 
    $(function() { 
 
     $("#slider-range").slider({ 
 
     range: true, 
 
     min: 0, 
 
     max: 500, 
 
     values: [75, 300], 
 
     slide: function(event, ui) { 
 
      $("#amount_min").val(ui.values[0]); 
 
      $("#amount_max").val(ui.values[1]); 
 
     } 
 
     }); 
 
     $("#amount_min").val($("#slider-range").slider("values", 0)); 
 
     $("#amount_max").val($("#slider-range").slider("values", 1)); 
 
     $("#amount_min").change(function() { 
 
     $("#slider-range").slider("values", 0, $(this).val()); 
 
     }); 
 
     $("#amount_max").change(function() { 
 
     $("#slider-range").slider("values", 1, $(this).val()); 
 
     }) 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <p> 
 
    <label for="amount">Price range:</label> 
 
    $<input type="text" id="amount_min" style="border:0; color:#f6931f; font-weight:bold;"> 
 
    $<input type="text" id="amount_max" style="border:0; color:#f6931f; font-weight:bold;"> 
 
    </p> 
 

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

 

 
</body> 
 

 
</html>

来源

2017-07-27 08:28:57 Oen44

在这里你去多一个解决方案https://jsfiddle.net/n4h6624h/

$(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)); 
 
     
 
    $('#amount').focusout(function(){ 
 
    \t var sliderVal = $(this).val(); 
 
     var splitSliderVal = sliderVal.replace(/\$/g, '').split('-'); 
 
     $("#slider-range").slider({ 
 
     \t values: [ parseInt(splitSliderVal[0]), parseInt(splitSliderVal[1]) ] 
 
     }); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<p> 
 
    <label for="amount">Price range:</label> 
 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
    
 
<div id="slider-range"></div>

来源

2017-07-27 08:39:03 Shiladitya

我们可以使用JQuery UI的价格范围滑块值与输入文字

回答

相关问题