HTML5 输入类型范围，带最小值滑块、最大值滑块和刻度答案

【问题标题】：HTML5 Input type Range with min value slider, max value slider, and ticksHTML5 输入类型范围，带最小值滑块、最大值滑块和刻度
【发布时间】：2017-06-15 23:42:03
【问题描述】：

我必须实现 HTML5 输入类型 Range

<input type="range"  min="0" max="100" step="10"  value="40" />

现在我想在步骤上显示刻度，就像在附加的图像上一样。可能吗？有什么办法吗？

【问题讨论】：

哪些记号以及它们与 step 的关系如何？
向我们展示您的尝试？预期输出是什么？
你现在想要什么？请更详细地说明您要实现的目标。
我认为您正在寻找。
看看this Collection of penscreated buy Ana Tudor

标签： javascript jquery html css

【解决方案1】：

用 HTML5 的输入类型 Range 实现这一点是不可能的，因为它只接受一个输入

你可以通过使用 JQUERY 滑块检查这个来实现这一点

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>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>
  <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>

【讨论】：

感谢您的回答。我正是在寻找这个
没有滴答声...... OP 要求提供滴答声。
@vsync 很好，它向我展示了幻灯片上的价值。我可以使用它:)

【解决方案2】：

我给你做了一个simple example，它将告诉你如何得到你想要的。

此代码将为您生成刻度，您可以相应地更改刻度的数量及其样式。您应该自动生成 HTML。

.rangeWrap {
  width: 40%;
}
.rangeWrap input {
  width: 100%;
  margin: 0;
}
.rangeWrap .ticks {
  display: flex;
  justify-content: space-between;
  height: 6px;
  margin: -1.5em 5px 0 6px;
  font: 10px Arial;
  counter-reset: count -1;
}
.rangeWrap .ticks > div {
  height: 100%;
  width: 1px;
  background: silver;
  counter-increment: count 1;
}
.rangeWrap .ticks > div:nth-child(5n - 4) {
  height: 200%;
}
.rangeWrap .ticks > div:nth-child(5n - 4)::before {
  display: block;
  content: counter(count,decimal);
  transform: translate(-50%, 100%);
  text-align: center;
  width: 16px;
}

  <div class='rangeWrap'>
    <input type="range"  min="0" max="100" step="10"  value="40" />
    <div class='ticks'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

【讨论】：

感谢这个溶胶。这可能是一个，但我得到了更准确的信息。我接受了这个答案。感谢您的帮助
@AsifAhmad - 没问题。但是这个问题的标题显然是要求 ticks 并且我已经花时间为你创建代码来满足你的要求......你要求显示刻度。我显示了刻度 :) 如果你一直想要一个多量程，我花时间是不公平的。
我两者都想要，我要混合这两者:)

【解决方案3】：

我发现正是你所追求的：

https://github.com/IonDen/ion.rangeSlider

【讨论】：

【解决方案4】：

请参阅 Woodrow Barlow 的回答 here。我在这里总结一下：

当您提供 step 属性时，Internet Explorer（所有事物）开箱即用地支持这一点，就像您的问题一样：

<input type="range"  min="0" max="100" step="10"  value="40" />

对于其他浏览器，需要各种解决方法，但可能会产生副作用。在 Chrome 和 Safari 中，您可以使用数据列表来提供步骤：

<input type="range" min="0" max="100" step="25" list="steplist">
<datalist id="steplist">
    <option>0</option>
    <option>25</option>
    <option>50</option>
    <option>75</option>
    <option>100</option>
</datalist>

在 Firefox 中，解决方案更加精细，包括自定义 css - see this jsFiddle。

【讨论】：

这应该在评论区

【解决方案5】：

本机执行此操作/填充：

对于刻度线：Woodrow Barlow 的 answer（在 @Lagostra 的这个问题上进行了总结）是本机解决方案，但目前不是很可定制
对于双滑块：[type="range"] 规范包括一个 multiple 属性，它应该完全做到这一点……但在撰写本文时，没有浏览器支持它。 http://leaverou.github.io/multirange/ polyfill 适用于所有支持 CSS 变量的浏览器。

【讨论】：