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>
</div>

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

Or look for an angular directive

2 Likes

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
please

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?

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