Create Real - Time Sliders in Rive

This video will teach you how to design and set up real-time interactive sliders in Rive. I break down the details of how to use Hit Boxes, Constraints and the State-Machine to use sliders at run-time.
Link to Rive file will be in the comments.

[@dixieechann]

This is exactly what I was looking for. Going to rewatch a few times before attempting

[@SJ98296]

I definitely agree with the folks on here saying that this video should have WAY more views that this. Nice work on this tutorial!! I too was hoping that you would share the details on how to setup the video demo shown at the start, but the techniques shared for this driver / driven configuration were awesome! I did want to mention that I found a small issue with the setup in how the pointer up interaction is detected. When dragging the button layer, you can easily move outside the hit box layer, so the release of the button isn't detected. I found a few ways around this, but the easiest solution was to just add a hidden layer the size of the stage and detect any point up interactions on that layer.

[@porterdesignandmotion]

@@SJ98296 thanks for the kind words. Yes I agree that after I made this video there are things I could do to optimize the hit box for the pointer interaction.
This was my first real tutorial for Rive and was made about a year ago. Since then Rice has also come out with some additional tools and updates to make some of these things easier.
I should do an update to this demo for sure. I will also consider doing an example using the video in the beginning. Thanks again.

[@porterdesignandmotion]

Link to Rive Community post where the slider demo lives. Feel free to grab the working file.
rive.app/community/5857-11408-real-time-slider-demo/

[@cindypierce1378]

Thanks for sharing this video. It was really helpful! Will you be making any more videos? I find the state machine the most challenging ... Would love to see you show more with the Rive State Machine.

[@Oleksandr-snk]

Yo man this is amazing tutorial! Definitely worth more views!

[@octocore]

Thanks for the tutorial! I was having a hard time understanding why you set “isDraggable” input to “true” for the tracking listener.
Correct me if I’m wrong but I don’t think that is needed since the input will already be true from the “detecting” listener on press.

[@porterdesignandmotion]

@@octocore perhaps. This tutorial is a bit older and could use an update. I will look into this further. I hope it was helpful.

[@fiercecurry]

Thank you so much!
One question, If the slider itself is animated and changes, lets say in color or even scale when its active, one could do that in an animation timeline layer, but how does one properly set it up with the state machine, to switch from an active state to passive? Would this use layers? Or another animation timeline that is like a clone?

[@semyonver]

Hi there! Thanks u so much for this tut! Btw could you please tell how to add video instead of a shape (as in the beggining)?

[@porterdesignandmotion]

You want to use "Solos"
Solos is a feature within Rive that allows you to set up a simple radio button to control the visibility of a solo layer. You can make any layer a solo layer by selecting it in your hierarchy and hitting Ctrl+L
You can import your sequence file (like the video of the 4x4 vehicle) into Rive and convert each layer to a solo layer.
Then you make a timeline and animate the solos on each frame. You can then use this tutorial to tie the slider to the solo animation rather than a shape.
I will work on a demo for this.

[@semyonver]

Thank you very much for such a quick respond! I'll be looking forward to it, have a good one!
@@porterdesignandmotion

[@dixieechann]

@@semyonver Hey there, not sure if you managed to try the solos out, but I just did using this tutorial, thought I'd share. ruclips.net/video/hFgjIgyJWKs/видео.html
Basically you need to convert your mp4 into an image seq, e.g PNG seq. Then, as mentioned by Porter, put these layers in a solo, and create a new timeline.
then manually activate the solo for each frame.
then connect this new timeline animation to your joystick as mentioned here around the 22:05 mark.

[@dixieechann]

@@porterdesignandmotion I did try this and it worked! So many potential uses for this. However, I wish there was a less manual way of activating the solos. I had 150 PNGs and had to solo them 150 times. But apart from that it works great

[@porterdesignandmotion]

@ I have been talking to the rive dev team for a while about this issue. There are a few bugs still that prevent the solos feature from being fully smooth…and there are file size issues as well.
We have been talking about creating a feature that recognizes the sequence and makes solos for you, but no updates in a while.

[@semyonver]

Hello! Hope you doing great!
I’ve got some troubles with combining joystick animation with the others and I would be so grateful if you could help me this:
So I have reveal animation (just some shapes coming from 0 to 100 opacity) of the ui and a joystick setup. Separately they works great but when I combine them in state machine I just always see the frames of the joystick animation timeline on top( Is there any tips to properly combine those states?