有最大值和最小值的价格

在一些网站，这使得销售的价格吧，还有就是你可以设定最高和最低的价格了吧。我不知道它的技术名称，但我有一个截图。有最大值和最小值的价格

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

有最大值和最小值的价格

回答

相关问题