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>

How to generate html and js code in separate file

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

Or look for an angular directive

Change ionic range slider to vertical orientation
Using <input type="range"> in ionic

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?


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