有最大值和最小值的價格

在一些網站，這使得銷售的價格吧，還有就是你可以設定最高和最低的價格了吧。我不知道它的技術名稱，但我有一個截圖。有最大值和最小值的價格

screenshot

我如何能做到這一點的HTML？

在此先感謝。

來源

2014-02-26 Ozan Atmar

這不會是動態的。我想定義最小值和最大值，並使用按鈕提交搜索。我沒有嘗試過任何東西。 –

你有沒有考慮過使用[jQuery UI的滑塊（https://jqueryui.com/slider/#range）？ – mathielo

http://refreshless.com/nouislider/似乎做的工作（與一些CSS和JS）。 – cepradeep

，如果你使用像jQuery UI的假設你有JavaScript的一個小知識，你可以很容易地實現這一點。以下是您可以實現的一個示例。 https://jqueryui.com/slider/#range

要看看它是如何實現的，你可以點擊該網頁上或爲快速參考我會離開這裏「查看源代碼」。

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Slider - Range slider</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <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" style="border:0; color:#f6931f; font-weight:bold;"> 
    </p> 
    <div id="slider-range"></div> 
</body> 
</html>

如果您需要HTML版本，您需要查看HTML5滑塊，但瀏覽器支持受限。這裏是一個鏈接，如果您想一些更多的信息：

http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input

來源

2014-02-26 14:11:01

但我恐怕沒有這樣的JavaScript的知識。你可以顯示你的答案如何使用POST方法形式嗎？ –

我不太清楚你的意思。你的意思是如何發佈從滑塊記錄的值？ –

是的，我的意思是。我想在搜索時使用$ _POST ['min']和$ _POST ['max']。 –

根據您有支持的瀏覽器，也許你可以使用範圍從HTML5：

<input type="range" min="10.50" max="50.00" step="0.50" />

你也可以有看看polyfills支持舊的瀏覽器：

https://github.com/fryn/html5slider

https://github.com/freqdec/fd-slider

來源

2014-02-26 14:22:26

其實我需要一個範圍欄中的2個滑塊。 –

我讀它符合一個教程，你看看這裏

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

完整的教程，如果您有任何問題http://talkerscode.com/webtricks/price-range-slider-using-jquery-css-and-php.php

來源

2016-03-17 05:47:10 moti

有最大值和最小值的價格

回答

相關問題