styling a vertical HTML5 range input

Question

I'm trying to style a vertical range input and this is what i have:

input[type='range'] {
    -webkit-appearance: slider-vertical;
    background-color: #ccc;
    height: 158px;
    width: 2px;
    margin: 8px auto;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 20px;
    background-color: #3ebede;
    height: 30px;
    width: 30px;
}

but it seems that because i have '-webkit-appearance: slider-vertical;' to make it vertical, styles won't apply.

Is there a way to style a vertical range without transforms/plugins...?

Note: I only need it to work on Chrome

UPDATE: Here is a JSFiddle for what I have.

Answer 1

So this is an answer, I guess. You need to use other selectors. Read more here.

-webkit-transform:rotate(90deg); - Make it vertical, tweak margins to suit.

Google is your friend!

From the article:

WEBKIT BASED BROWSERS (CHROME, SAFARI, OPERA)

In webkit based browsers, the track is styled with a special pseudo selector ::-webkit-slider-runnable-track, and the thumb with ::webkit-slider-thumb.

Custom focus styles can also be applied on the thumb and the track. If you go that route, you'll have to remove default focus styles on the input itself.

Here is an example in a fiddle. CSS taken from my previous source.

HTML

<input type="range" />

CSS

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}