javascript - HTML5 Input type Range with min value slider, max value slider, and ticks

I have to implement HTML5 input type Range

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

Now i want to show ticks on steps just like on image attached. Is it possible ? Is there any way ?

I have to implement HTML5 input type Range

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

Now i want to show ticks on steps just like on image attached. Is it possible ? Is there any way ?

Share Improve this question edited Jun 15, 2017 at 15:25 henry 4,3852 gold badges27 silver badges38 bronze badges asked Feb 22, 2017 at 11:01 Shadow Walker 2061 gold badge2 silver badges13 bronze badges

3 Which ticks and how they relate to step ? – Mairaj Ahmad Commented Feb 22, 2017 at 11:03
Show us what you've tried? What is expected output? – Vilas Kumkar Commented Feb 22, 2017 at 11:06
You want what now? Please explain what you're trying to achieve in more detail. – George Commented Feb 22, 2017 at 11:06
I think you are looking for <input type="number" min="0" max="100" step="10" value="40" />. – Shoaib Konnur Commented Feb 22, 2017 at 11:07
Take a look at this Collection of pens created buy Ana Tudor – Lionel T Commented Feb 22, 2017 at 11:12

| Show 3 more comments

5 Answers 5

Sorted by: Reset to default 6

Implement this with HTML5's input type Range is not possible because it accept only one input

you can achieve this by using JQUERY slider check this

<!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>

I've made you a simple example which will show you how to get what you want.

This code will generate ticks for you, and you can change the amount of ticks and their style accordingly. You should generate the HTML automatically.

.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: '0';  /* min value */
  transform: translate(-50%, 100%);
  text-align: center;
  width: 16px;
}

.rangeWrap .ticks > div:nth-child(6)::before {
  content: '50'; /* middle value */
}

.rangeWrap .ticks > div:last-child::before {
  content: '100'; /* max value */
}

<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>

I've built exactly what you are after:

https://github.com/yairEO/ui-range

See Woodrow Barlow's answer here. I'll summarize here:

Internet Explorer (of all things) support this out of the box when you supply the step attribute, like in your question:

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

For other browsers, various workarounds are needed, with possible side-effects. In Chrome and Safari, you can use a datalist to provide the steps:

<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>

In Firefox, the solution is even more elaborate, and includes custom css - see this jsFiddle.

Doing this natively / polyfilled:

For the tick marks: Woodrow Barlow's answer (summarized in @Lagostra's on this question) is the native solution, but it currently isn't very customizable
For the double sliders: The [type="range"] spec includes a multiple attribute, which is supposed to do exactly this… but as of this writing no browsers support it. The http://leaverou.github.io/multirange/ polyfill works for all browsers that support CSS variables.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HTML5 Input type Range with min value slider, max value slider, and ticks - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)