feat: vertical orientation for ion-slider

[snr-lab]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [X] v4.x
• [X] v5.x
• [X] v6.x

Current Behavior

The Range Slider can be used only in Horizontal orientation. I tried to rotate using transform property to make it vertical. But the touch movement is handled only in x-axis.

Expected Behavior

Should be able to use Range Slider in vertical orientation.

Steps to Reproduce

NA

Code Reproduction URL

No response

Ionic Info

$ ionic info [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

   Require stack:
   - C:\Users\rahulkundu\AppData\Roaming\nvm\v14.17.0\node_modules\@ionic\cli\lib\project\index.js       
   - C:\Users\rahulkundu\AppData\Roaming\nvm\v14.17.0\node_modules\@ionic\cli\lib\index.js
   - C:\Users\rahulkundu\AppData\Roaming\nvm\v14.17.0\node_modules\@ionic\cli\index.js
   - C:\Users\rahulkundu\AppData\Roaming\nvm\v14.17.0\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 6.18.1 (C:\Users\rahulkundu\AppData\Roaming\nvm\v14.17.0\node_modules@ionic\cli)
Ionic Framework : @ionic/react 6.0.8

Capacitor:

Capacitor CLI : 3.4.1 @capacitor/android : 3.4.1 @capacitor/core : 3.4.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe) npm : 6.14.13 OS : Windows 10

Additional Information

Vertical Range slider is very useful in many cases. I think it will be a great addition to the framework. I am a Ract developer and I will be happy to contribute.

[liamdebeasi]

Thanks for the issue. Could you please describe your use case for this feature? In particular:

• What is the problem you are running into?
• What alternatives have you tried?

[snr-lab]

I have an existing app for the control panel / human-machine interface. User can build their own panel according to the need. In many cases, the user wants to keep multiple range sliders (4-5) together to utilize the space efficiently. The vertical range slider is much more appropriate for this scenario. I am redesigning the app and the UI framework I am using is Ionic. The existing app has this functionality. To avoid breaking user space I need the vertical slider.

As an alternative first I tried to rotate the Ionic Range slider using the transform CSS property. But the touch only works x-direction. Second I tried to add third-party sliders, but could not find a good one that works with a negative value and decimal steps.

Ionic is a great UI framework for mobile, I think a vertical range slider should be available. There are lots of common use cases e.g. volume buttons or equalizers.

[liamdebeasi]

Thanks! I think this is something that would be good for Ionic to support.

[snr-lab]

Thank you very much for your support.

[snr-lab]

Hi, Any tentative plan to implement this feature?

[vivek-gemini]

Thanks! I think this is something that would be good for Ionic to support.

hey @liamdebeasi . can u please give an estimate till when this will be implemented?

[liamdebeasi]

We do not provide time estimates for future feature work. However, we will post a comment on this thread when the feature has been implemented.

[rcowling]

I would also like to make this request. Please add an option to have the slider vertical. @liamdebeasi

[rameez-arain-dm]

We have the same issue Please make it Vertical as well

[snr-lab]

@liamdebeasi It will be great if the Ionic team takes this feature with higher priority. It is almost 6 months since the feature was requested. We are planning to release our app as soon as possible. The vertical slider is one of the very few areas blocking the release.

[rameez-arain-dm]

For now you can use angular slider it's working good.

[KirstenStake]

would like this capability for vertical ion-range as well please!