How do sliders work?

pm shared this question 2 years ago
Answered

Hi,


I'm getting started with Justinmind. I use the integrated slider widget, the dispalyed value in a box should change between 1 and 10 when the ellipse is moved on the horizontal line.


I can't work this out with the events.


Anyone could explain how to do this?


a66026aee73fecd5ff21e841c0393d94

Comments (6)

photo
1

Hi,


This tutorial should help:


http://www.justinmind.com/support/int...


Best,


Sonia Durán

photo
1

Hi Sonia,


I checked this tutorial before, it is about designing a slider. As I mention I'm using Justinmind integrated sliders and I'm wondering about how to use the Events to display a specific number when I move the ellipse.


Thanks!

photo
1

Hi there,


You can do this by creating a 'on drag stop' event with the outcome 'set value' for a text field, which will display the number.


Then create Create the condition 'When [slider circle] intersects [line]


I have attached a screenshot for clarity.


16053a645a099fcab8c70694399e9976


Note that this will only show certain values that you specify - the slider will not display every possible value. I.e. - when the slider intersects the first line, it will display 25, the second line, 50, and so on. In-between values (26, 27, 28, etc.) would be quite laborious to create as you would need to create events for every little space on the line.


Let me know how this works for you.


Best,


Danielle

photo
1

Thanks Danielle this is what I need. However I can't find the "on drag stop" event, but only "on drag end" (I have Justinmind 7.1.0). Are these equivalent events?


My current solution is to add multiple rectangles and assign a set value event to each of these targets. But the result is not very responsive, quit buggy.


Also the "set value" event will occurs only once I drop the slider, but not while I hold the slider on the target (i need to drop it). This makes the use of the slider quite tricky. Anyway I can fix that?


Sorry for asking, I'm just getting started and can't find existing threads on the web.


Thanks!


556d17b5079d28161704a7ed5a9c8db4

photo
1

Hi there,


Yes, on drag end and on drag stop are the same.


Another solution is to have a two variables that detect when the ellipse intersects the line, then have there be an 'On variable change' event for the numbers, with the result Show.


I have created a new slider that has the numbers appear without ending the drag. You can find that here: https://dl.dropboxusercontent.com/u/4...


Let me know how this works for you.


Best,


Danielle

photo
1

Wow your tool works great!


This is exactly what I needed, and I could just look into it and reproduce the tool in my mockup.


this is definitely the best way to make a slider. I think I didn't understand clearly your first screenshot, I've been a bit slow to start!


Thank you so much for your help, it's brilliant.