2

I am trying to create an input[type=range] element which moves vertically instead of horizontally. I would also like to customize it with my own CSS. Also, I would like it to scale to fit its parent's dimensions rather than having to explicitly declare its dimensions. Is this possible in any modern browser?

My understandings:

  • I can use -webkit-appearance: none to apply custom CSS to input[type=range]
  • I can use -webkit-appearance: slider-vertical to create a vertical slider with a box model that accurately reflects its position.
  • I can use transform: rotate(90deg) to create a vertical slider with a box model which does not accurately reflect its position.

As such, it would appear that my goal isn't possible with today's browsers. Is that correct?

Here's a JSFiddle with my best effort. I am able to achieve two-thirds of my goal, but need to explicitly invert the height/width of the parent and apply that to the input[type=range] element.

Here is the accompanying code:

<div class='parent'>
    <input type="range" class='vertical-range' />
</div>

<br />

<div class='parent'>
    <input type="range" class='vertical-range fixed' />
</div>

.parent {
    width: 20px;
    height: 100px;
    background-color: blue;
    margin: 50px;
}

.vertical-range {
    -webkit-appearance: none;
    transform: rotate(90deg);
    height: 100%;
    width: 100%;
    background-color: green;
    margin: 0;
}

.fixed {
    width: 100px;
    height: 20px;
    -webkit-transform-origin: 0 0;
    margin-left: 20px;
}

and here is another question I found which is very similar, but was not answered appropriately due to lack of initial instructions

Community
  • 1
  • 1
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • [This may help](http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_range), so might [this SO question](http://stackoverflow.com/q/3556157/2065702) – Zach Saucier Sep 12 '14 at 00:03
  • Thanks for the links. It looks like if I remove -webkit-appearance:none from the range itself, but keep it on -webkit-slider-thumb, I'm still not able to customize the thumb itself :( But I'll play with it for a while longer still! – Sean Anderson Sep 12 '14 at 01:52
  • https://code.google.com/p/chromium/issues/detail?id=341071 I found the bug report for it :( – Sean Anderson Sep 12 '14 at 01:55

1 Answers1

1

This is currently not possible: https://code.google.com/p/chromium/issues/detail?id=341071

Issue 341071: Impossible to style vertical input type=range.

What steps will reproduce the problem?
1. Create input <input type="file" class="slider" >
2. Style this element with CSS: .slider{-webkit-appearance: none; background: url(image.png);}
3. Change orientation: .slider.vertical{-webkit-appearance: slider-vertical;}

What is the expected result?
Input become vertical with custom background.

What happens instead?
Input become vertical, but without custom background.
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • You should include a snippet from the site or a summary of what's said so your answer is useful when the site is down – Zach Saucier Sep 12 '14 at 02:58