How to change ionic range slider to vertical orientation

<div class="range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>

The range slider is just a styled html range input. You could either use css

Or look for an angular directive


Thanks it works good

Thanks mhartington, but I am not able to align range slider to extreme left or right side.
I am having google map with ion-content scroll = “false” behind the range slider

Very Nice and Simple but how to get this Range Slider value when we scrolling.?

I’m using latest version of ionic: 3.18.0
But solution with vertical not work well:
You can check it on my gif:

any idea how to solve it?

1 Like

No, but to let you know the behavior in more detail, what you are seeing is the slider moving vertically while you move the mouse horizontally within the div. I ran into the same thing.

Ionic 3 range component does not work vertically, if you rotate you still have to drag horizontally to change the value