How to change ionic range slider to vertical orientation

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

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

Or look for an angular directive

2 Likes
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:

ionic_slider
ionic_slider.gif455×831 155 KB

any idea how to solve it?

1 Like
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