Question

在一些进行销售的网站中，有一个栏可以设定最高和最低价格。我不知道它的技术名称，但我有截图。

screenshot

我怎么能用html做到这一点？

提前致谢。

Answer 1

如果您使用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

Answer 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 ) );
});

如果您有任何问题{p <3}}

，请在此处完成教程

Answer 3

使用两个单滑块并通过隐藏（使用css和html）将其呈现为双滑块。

[slider] {
  width: 300px;
  position: relative;
  height: 5px;
  margin: 45px 0 10px 0;
}

[slider] > div {
  position: absolute;
  left: 13px;
  right: 15px;
  height: 5px;
}
[slider] > div > [inverse-left] {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider] > div > [inverse-right] {
  position: absolute;
  right: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}


[slider] > div > [range] {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 14px;
  background-color: #d02128;
}

[slider] > div > [thumb] {
  position: absolute;
  top: -7px;
  z-index: 2;
  height: 20px;
  width: 20px;
  text-align: left;
  margin-left: -11px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background-color: #FFF;
  border-radius: 50%;
  outline: none;
}

[slider] > input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 3;
  height: 14px;
  top: -2px;
  width: 100%;
  opacity: 0;
}

div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

div[slider] > input[type=range]:focus {
  outline: none;
}

div[slider] > input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
  -webkit-appearance: none;
}

div[slider] > input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-tooltip {
  display: none;
}

[slider] > div > [sign] {
  opacity: 0;
  position: absolute;
  margin-left: -11px;
  top: -39px;
  z-index:3;
  background-color: #d02128;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  -webkit-border-radius: 28px;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

[slider] > div > [sign]:after {
  position: absolute;
  content: '';
  left: 0;
  border-radius: 16px;
  top: 19px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top-width: 16px;
  border-top-style: solid;
  border-top-color: #d02128;
}

[slider] > div > [sign] > span {
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}

[slider]:hover > div > [sign] {
  opacity: 1;
}

<div slider id="slider-distance">
  <div>
    <div inverse-left style="width:70%;"></div>
    <div inverse-right style="width:70%;"></div>
    <div range style="left:0%;right:0%;"></div>
    <span thumb style="left:0%;"></span>
    <span thumb style="left:100%;"></span>
    <div sign style="left:0%;">
      <span id="value">0</span>
    </div>
    <div sign style="left:100%;">
      <span id="value">100</span>
    </div>
  </div>
  <input type="range" value="0" max="100" min="0" step="1" oninput="
  this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
  let value = (this.value/parseInt(this.max))*100
  var children = this.parentNode.childNodes[1].childNodes;
  children[1].style.width=value+'%';
  children[5].style.left=value+'%';
  children[7].style.left=value+'%';children[11].style.left=value+'%';
  children[11].childNodes[1].innerHTML=this.value;" />

  <input type="range" value="100" max="100" min="0" step="1" oninput="
  this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
  let value = (this.value/parseInt(this.max))*100
  var children = this.parentNode.childNodes[1].childNodes;
  children[3].style.width=(100-value)+'%';
  children[5].style.right=(100-value)+'%';
  children[9].style.left=value+'%';children[13].style.left=value+'%';
  children[13].childNodes[1].innerHTML=this.value;" />
</div>

Answer 4

根据您必须支持的浏览器，您可以使用HTML5中的范围：

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

您还可以查看polyfill以支持旧版浏览器：

https://github.com/fryn/html5slider

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

Answer 5

你可以试试这个。它对我有用。

<强> HTML

    <input type="number" min="200" max="100" step="1" id="input-number">

    <input type="number" min="200" max="1000" step="1" id="input-number">

<强> JS

var select = document.getElementById('input-select');
for ( var i = 200; i <= 1000; i++ ){
var option = document.createElement("option");
    option.text = i;
    option.value = i;
    select.appendChild(option);
}
var html5Slider = document.getElementById('html5');
noUiSlider.create(html5Slider, {
 start: [ 500, 800 ],
 connect: true,
 range: {
    'min': 200,
    'max': 1000
 }
});

var inputNumber = document.getElementById('input-number');

html5Slider.noUiSlider.on('update', function( values, handle ) {

var value = values[handle];

if ( handle ) {
    inputNumber.value = value;
} else {
    select.value = Math.round(value);
}
});

select.addEventListener('change', function(){
    html5Slider.noUiSlider.set([this.value, null]);
});

inputNumber.addEventListener('change', function(){
    html5Slider.noUiSlider.set([null, this.value]);
});

以下是实时链接：https://codepen.io/sifulislam/pen/YeYpdr

最高和最低价格的价格栏

5 个答案: