3

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 ?

Sample Image

henry
  • 4,244
  • 2
  • 26
  • 37
Shadow Walker
  • 206
  • 1
  • 2
  • 13

5 Answers5

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>
Umang Patwa
  • 2,795
  • 3
  • 32
  • 41
4

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: 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>
vsync
  • 118,978
  • 58
  • 307
  • 400
  • Thanks for this sol. this could be the one, but i got more accurate what i was looking for. I accepted that answer. Thanks for helping out – Shadow Walker Feb 22 '17 at 12:13
  • 1
    @AsifAhmad - no problem. but the title of this question clearly is asking for **ticks** and I've spend time creating you code which does what you asked for.. you asked to show ticks. I showed ticks :) it's not really fair for me to spend my time if you wanted a multirange all this time. – vsync Feb 22 '17 at 12:15
  • I want both n I gona make a hybrid of these two :) – Shadow Walker Feb 22 '17 at 12:17
3

I've found exactly what you are after:

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

enter image description here

vsync
  • 118,978
  • 58
  • 307
  • 400
1

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.

henry
  • 4,244
  • 2
  • 26
  • 37
Lagostra
  • 63
  • 1
  • 5
0

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.

henry
  • 4,244
  • 2
  • 26
  • 37