Building a custom slider

eggroll shared this question 2 years ago
Answered

Hi,


I'm trying to build a horizontal slider that does two things:

  1. Starts with the slider handle positioned in the center
  2. Has the slider track to the left of the handle a different color from the slider track to the right of the handle


I've got it close to working properly with one exception. While the slider handle starts out in the center, as I would like (see first image below), and I can slide the handle to the far left without exceeding the boundaries of the slider (see second image below), I can not slide the handle to the far right. It will not go any farther than the initial center position.

I cannot figure out what setting it is that is causing it to stop at center and go no farther to the right. I'm assuming it has to do with the initial positioning and how that affects the scrolling of the dynamic panel, but I don't know how to work around that or why it wouldn't even work as is since it is an element that is bigger than the containing dynamic panel and, therefore, should scroll left or right until reaching the limit of the element being scrolled (i.e. the slider handle and the two track lines).

I have tried to adapt the slider widgets that exist within JIM, but all of them have elements that exist completely within their containing panels. That is, they don't exceed their containing panels' boundaries as mine do and, therefore, don't require a dynamic panel with scrolling.

I have attached a prototype to demonstrate the current implementation of the slider. Any help would be greatly appreciated.


831f70730e9c77ed1cff447ac06d4b52

Slider in its initial state


027f4ff523340764766aab12ee1e6c64

Slider with the handle in the far left position

Best Answer
photo

Check out these tutorials to learn how to create a slider:

1. Designing a slider

2. Designing a price slider

3. Designing a before-after image slider

Comments (58)

photo
1

If this really isn't possible then I'll be fine with just letting it move around but having made it, the (blue and grey) bars that make up the slider come in front of the 'mask' and then permanently stay there.


How it looks when simulation run:


252e10c2e4d13d9c17dd8802fd778103


Then when I try to move the button:


I realise that may have made no sense so am I able to send you a .vp file somehow?


Ian

photo
1

Many thanks Victor.

photo
1

The sample slider that you have forwarded uses mouse over events. This is not applicable to iOS8. Or am I missing something

photo
1

Having similar issues with the rectangle under the button. Once you drag the ball the rectangle comes out in front of everything on the screen. I am using it within a dynamic panel and even when I change panels it remains on the screen while the other content has transitioned out.

photo
1

Hi Rob,


Please check out this new example of a slider. I hope it helps.


https://www.dropbox.com/s/n4njv1l2e7q...


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.

photo
1

Hi Jan,


You should do the same when decreasing the values --> Variable -1.


Also, to recognize the direction when dragging you should use the "on drag start" then keep the position into a variable. Then use the "on drag" using the current position minus the last position.


I hope this helps,


Best,


Sonia Durán

photo
1

Could i send my file with prototype and you make it ? Its posible ?

photo
1

Hi Jan,


Usually, we do not create prototypes. If you want to share with us the vp file here (via dropbox/wetransfer) and I will have a look to your prototype.


Best,


Sonia Durán

photo
1

Thank you so much.

photo
1

1c10310a67b508943736db3f20fba0e1

photo
1

I upload this prototype on dropbox and then i put link there, you could see slider on the bottom on the screen and label with number "24". I need value from slider to label.


https://www.dropbox.com/s/bzgttjniyzr...

photo
1

I shared prototype via dropbox, could you look at on this ?

photo
1

Hi,


here you are your slider modified. In case you want to modify the first and last value, you can do it at the expressions tab.


https://www.dropbox.com/s/cf5ozo6g7tz...


b2625273c68bb8df54e65b0ee6f69b5c


I hope it helps.


Best,


Sonia Durán

photo
1

Just follow this tutorial, making the slider vertical instead of horizontal.

photo
1

Hi Felipe,


May I ask if you could attach an example of what you're looking for?


Best,

Danielle

photo
1

Hi Danielle,

Thanks for your reply, here's an URL with the example of what I'm looking for: http://bit.ly/1SUeagj


Best,

photo
1

Hello Danielle, any tutorial or suggestions you can help me with to answer my question??

photo
1

Hi Felipe,

Please find attached the example I've created for you. I hope it helps. :)


Best,


Sonia Durán

photo
photo
1

Hi there,


The following tutorial should help you to get some ideas on how to accomplish that. You should create three custom sliders and then add the desired calculations on the text field.


https://www.justinmind.com/support/how-to-design-an-advanced-price-slider-in-your-interactive-prototypes/


Best,


Sonia Durán

photo
1

Hello.


I believe I've followed the above tutorial to the letter by simply creating a vertical slider shape below my slider image instead of an horizontal one. Somehow this is not working.

Is there a way to just rotate a successful horizontal slider since I can't seem to make this work?


I appreciate your time.


martin

photo
1

Dear Oana,


You should substitute the corresponding values at the main expression depending on your needs. See the screenshot attached.


Best,


Sonia Durán

photo
1

Thank you Sonia for your answer.

I tried different versions for the formula described in the tutorial, but none of them was able to increase from 25 to 25 until 500.

What I would like to see on slider are these values: 0, 25, 50, 75, 100, 125, 150, 175, 200, ... , 475, 500.

photo
photo
1

Thank you Sonia for your answer.

photo
1

Dear @eggroll,

Creating a slider without events is not a good idea if you want to obtain the described behaviour. The example attached should help. Kindly let me know how it goes.

Best,

Sonia Durán

photo
1

Dear Serena,

Can you attach an example of what you're looking for and what this looks like so we can assist you more helpfully?

You can attach it in a .rar format, or upload it to a file sharing service such as Dropbox, and attach the link to it here.


Best,

Sonia Durán

photo
1

Hi Sonia,


Please see attached file. I am trying to replicate this screen. When you swipe right or left on the number line you will be able to see the other days in November.


Also, is there a way to attach videos like the ones in the screen shot? I have video files on my computer.


Thanks,

Serena

photo
1

Dear Serena,


Can you share the snippet of the screen you are working in?


Best,

photo
photo
1

Dear Francesca,


You should follow the following steps (See the example attached)


First, divide the slider space into as many slots as you need (see the expression in thumb OnDrag event)


Then, map these slots to the required values with a data master (see the expression at the label of the "On Variable Change" event)


Kindly let me know how it goes.


Best,

photo
1

I made a quick prototype to show how to do it https://www.dropbox.com/s/nqwvyhpmqixavoe/slider-snap-100px.vp?dl=0

photo
1

Victor, you are awesome sir! Thank you very much for this.

photo
1

Hi there,

Check out the attached prototype. Does this accomplish what you're looking for?

Best,

Danielle

photo
1

Hi Danielle,

This is excellent, thank you! I'm actually trying to build out something a little more sophisticated, and I'm happy to pay for it if necessary. Is it possible to schedule a call to review what we can do together?


Thanks Again,

Brian

photo
1

Hi Brian,

Unfortunately we don't provide support over the phone, but we can assist you through this channel or through the customer support portal if you have a subscription and are working with sensitive material.

Best,

Danielle

photo
1

Hi Danielle,

Thanks for getting back to me! I'd like to export the file I have created, and even polish it up a little more. Is there a member of the JustinMind team I can work with to help polish the doc? How would I export it for external use/share?


Best,

Brian

photo
1

Hi Brian,

There are a few ways you can export your prototype. You can export them to HTML (file -> export to HTML), share them to an online account and add reviewers, or if you're working with multiple team members, you can use Teamwork to work on the prototype at the same time.

As for getting help with polishing your prototype, we can offer solutions for any bugs or general questions you have, but you may want to contact one of our experts for some more concrete assistance.

Best,

Danielle

photo
photo
1

Check out the attached prototype, which modifies yours to achieve what you're looking for. Hope this helps.

photo
1

Thanks !!! This will work for me

photo
photo
1

Hi Helly,

Check out the attached prototype. It uses a variable and a data master to store the date/time values. Let me know if you have any questions.

Best,

Danielle

photo
1

Hi Matt,

This is a really simple fix - you just need to mark the slide menu as 'always on top' in the properties palette. See the attached edited version of your prototype.

Best,

Danielle

photo
1

Uh... i've just realized that i was marking "always on top" the header bar and not the slide menu, that's why the ellipses were not covered. I guess working and studying until late makes you a little bit slow ahahah. Thanks for the clarification. Great software and great support by the way!

Best regards,

Matteo

photo
1

Glad to help! Feel free to comment on or create another topic if you have any other questions or concerns.

photo
photo
1

Did you checked this tutorial in our learning section? https://www.justinmind.com/support/designing-a-price-slider/

photo
1

Hi, that is basically what I've used, however I used the one with interactive items, and that was the one where it did not work with different values.

photo
1

If you like, you can send your .vp file to jim.developer@justinmind.com and we can take a look at it.

photo
1

I tried the e-mail, but it won't send. It tells me that the e-mail address is incorrect?

photo
1

Sorry, I misspelled the address. Is jim.development@justinmind.com

photo
1

Here you go. There were two issues. One is the elements inside the dynamic panel were grouped together and that made the 'insert into' event go crazy. The other issue was the 'Round' function was rounding to 50 decimals.

photo
photo
1

You can prototype a slider, however you will probably need a developer to help with implementing it into your website.

photo
1

Danielle, Thank you for getting back to me. I thought Justinmind created the HTML code automatically and I could just copy and paste into an html element in Wix. Your answer cleared that question.

Thanks again,

Julio

photo
photo
1

Check out these tutorials to learn how to create a slider:

1. Designing a slider

2. Designing a price slider

3. Designing a before-after image slider

photo
1

Danielle, thank you very much. I will look into these links.