Upvote 24

Building a custom slider

Answered eggroll ● ago

Hi,

I'm trying to build a horizontal slider that does two things:
Starts with the slider handle positioned in the center
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.

Slider in its initial state

Slider with the handle in the far left position

Files:

Best Answer

Danielle Schneider ●

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

Replies (39)

Enrique Cano ●

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:

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

Enrique Cano ●

Many thanks Victor.

Enrique Cano ●

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

Enrique Cano ●

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.

Sonia Durán ●

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

Enrique Cano ●

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!

Danielle Schneider ●

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

Enrique Cano ●

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!

Danielle Schneider ●

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

Enrique Cano ●

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.

Sonia Durán ●

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

Enrique Cano ●

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

Sonia Durán ●

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

Enrique Cano ●

Thank you so much.

Enrique Cano ●

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...

Enrique Cano ●

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

Sonia Durán ●

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...

I hope it helps.

Best,

Sonia Durán

Danielle Schneider ●

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

Danielle Schneider ●

Hi Felipe,

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

Best,

Danielle

Felipe ●

Hi Danielle,

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

Best,

Felipe ●

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

Sonia Durán ●

Hi Felipe,

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

Best,

Sonia Durán

Files:

Sonia Durán ●

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

Martin Dulac ●

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

Sonia Durán ●

Dear Oana,

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

Best,

Sonia Durán

Files:

Oana O ●

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.

Oana O ●

Thank you Sonia for your answer.

Sonia Durán ●

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

Files:

Sonia Durán ●

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

Serena V ●

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

Files:

Sonia Durán ●

Dear Serena,

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

Best,

Francesca Griffiths ●

https://www.justinmind.com/support/how-to-create-a-price-slider-with-interactive-elements-in-your-web-wireframes/

Sonia Durán ●

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,

Files:

Victor Conesa ●

Sure, check this prototype https://www.dropbox.com/s/nqwvyhpmqixavoe/slider-snap-100px.vp?dl=0

Victor Conesa ●

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

Ivan Kandi ●

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

Danielle Schneider ●

Hi there,

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

Best,

Danielle

Files:

Briancs ●

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

Danielle Schneider ●

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

Briancs ●

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

Danielle Schneider ●

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

Danielle Schneider ●

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

Files:

Sheraz ●

Thanks !!! This will work for me

Danielle Schneider ●

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

Files:

Danielle Schneider ●

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

Files:

Matt Livoli ●

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

Danielle Schneider ●

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

Victor Conesa ●

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

Camillaschneider ●

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.

Victor Conesa ●

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

Camillaschneider ●

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

Victor Conesa ●

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

Victor Conesa ●

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.

Files:

Danielle Schneider ●

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

Jmazzarella ●

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