5

This is a follow-up question to Ticks for type=“range” HTML input. At CSS-Tricks, they described a way to cross-browser style a type=range input, Styling Cross-Browser Compatible Range Inputs with CSS, which works very well ... except that the CSS,

input[type=range] {
  appearance: none;/*does not validate*/
  -o-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;/*kills tick marks*/
}
<div>
  <input type="range" list="Z">
  <datalist id="Z">
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
    <option>50</option>
    <option>60</option>
    <option>70</option>
    <option>80</option>
    <option>90</option>
    <option>100</option>
    <option>110</option>
  </datalist>
</div>

will kill any ticks defined by the markup.

<div>
  <input type="range" list="Z">
  <datalist id="Z">
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
    <option>50</option>
    <option>60</option>
    <option>70</option>
    <option>80</option>
    <option>90</option>
    <option>100</option>
    <option>110</option>
  </datalist>
</div>

Does the standard allow range styling with tick marks? Or should I just shoehorn an image in there and call it done?

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
Joel DeWitt
  • 1,226
  • 2
  • 13
  • 26

2 Answers2

0

I was able to kind of hack it by making the background color of the -slider-runnable-track- the same as the background of the containing element. Note that I have included the code for only -webkit- browsers. The others browsers would be pretty self-explanatory:

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: rgb(255,255,255);
}

This would hide the sliding bar but keep the tickmarks.

Here is the fiddle: https://jsfiddle.net/ffp8ner5/

A.Sharma
  • 2,771
  • 1
  • 11
  • 24
  • That's not the actual way to fix this, the problem is that we DO want to keep default appearance to none and still see the ticks.. but looks like that's not possible – msqar May 11 '17 at 18:16
  • Nevermind, i had to do it manually using CSS pseudo-elements, all with ::after {} and it looks super good now... – msqar May 11 '17 at 20:16
  • @msqar Can you post an example? – 1.21 gigawatts Jan 16 '19 at 18:01
  • 1
    @1.21gigawatts hey, sorry i don't the code nowadays, i posted it a year ago. But AFAIR i fixed by using pseudo-element CSS, u need a working example? i might try to search for it. – msqar Jan 16 '19 at 18:04
-4

Please use like this

input[type="range"]

http://www.w3schools.com/css/css_attribute_selectors.asp

Narayan Singh
  • 1,234
  • 2
  • 13
  • 26