391
Views
6
Comments
Adjusting the Range Slider Pattern
Question

For the range slider widget, is it possible to display the value that it is at in a container beside/above it. For example, if my range slider min value is 0 and max value is 60, I don't want to see the values populated below the slider; but instead wherever I move my slider, it would display the value that it is at in a container beside it, similar to the image attached.


Also is it possible to change the values within the range slider from integers to minutes and seconds for example


Thanks!

image.PNG
2024-02-16 07-43-18
Amit Verma

Jonathan Tay wrote:

For the range slider widget, is it possible to display the value that it is at in a container beside/above it. For example, if my range slider min value is 0 and max value is 60, I don't want to see the values populated below the slider; but instead wherever I move my slider, it would display the value that it is at in a container beside it, similar to the image attached.


Also is it possible to change the values within the range slider from integers to minutes and seconds for example


Thanks!

Hello Jonathan Tay,

Please find the attached oml file for customize range slider widget and also customize your range between 0 to 60.

Please refer screen shot......

 

Please let me know if you have any doubts.

TestRangeSliderExample.oml
2021-09-20 20-55-59
ALEX LIMA

Amit Verma wrote:

Jonathan Tay wrote:

For the range slider widget, is it possible to display the value that it is at in a container beside/above it. For example, if my range slider min value is 0 and max value is 60, I don't want to see the values populated below the slider; but instead wherever I move my slider, it would display the value that it is at in a container beside it, similar to the image attached.


Also is it possible to change the values within the range slider from integers to minutes and seconds for example


Thanks!

Hello Jonathan Tay,

Please find the attached oml file for customize range slider widget and also customize your range between 0 to 60.

Please refer screen shot......

 

Please let me know if you have any doubts.


Hi Amit.


I created the code on version 9 and works fine, but there is a little problem. If I use for currency, the slider never reaches the end. For example: my MaxValue is 18246.31, when I put the slider at it´s end, brings me 18245.99, never 18246.31

Any suggestions??


Regards.




UserImage.jpg
Jonathan Tay

Hi Amit, 


Sorry I forgot to make it clear, I'm trying to do this on mobile interface so I can't really apply the same block.

2026-03-09 12-26-51
Fábio Fantato
 
MVP

Hi Jonathan, 

the idea on mobile is the same of Amit proposed. You can open the mobilePatterns and clone the Slider. YOu just need some css skills to customize it :)


Best regards

Fabio

2024-02-16 07-43-18
Amit Verma

Fábio Fantato wrote:

Hi Jonathan, 

the idea on mobile is the same of Amit proposed. You can open the mobilePatterns and clone the Slider. YOu just need some css skills to customize it :)


Best regards

Fabio

Yes i am agree with Fábio Fantato.

Best regards

Amit Verma

UserImage.jpg
Jonathan Tay

Fábio Fantato wrote:

Hi Jonathan, 

the idea on mobile is the same of Amit proposed. You can open the mobilePatterns and clone the Slider. YOu just need some css skills to customize it :)


Best regards

Fabio


Hi Fabio,


Sorry, do you think you can tell me how i can clone the slider? I've tried publishing it and moving to my app but I'm not sure how to do it between a web app and a mobile app?


Thanks a lot :)


Regards,

Jonathan

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.