How to change ionic range slider to vertical orientation


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

How to generate html and js code in separate file
#2

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
#3

Thanks it works good


#4

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


#5

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


#6

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?


#7

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.


#8

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