Making a slider with canvas

Hello,

I would like to make a fancy slider with canvas, but I haven’t completely understood how it works.

Here is how I would like the slider to look like :

But I don’t know how to make it move to the left or the right when I drag it. I’ve tried these blocks but they do nothing.

blocks (4)

I think the problem comes from my design.

Can you please tell me what’s wrong with what I did ?

here’s a screenshot of my design :


Here is the AIA : HueSlider.aia (1.1 MB)

Thank you

See here:

Thank you . I’ve made it work without the gradient to the left of the image sprite.

it looks like this :

Is it possible to make it look like this ?

with a gradient moving as the ball is dragged ? I’ve already done it with the gradient fixed to the image sprite. but the problem is that a image sprite coordinate cannot go into negatives.

here’s the result :

I wish there was a function to modify the width of an image sprite with x as a variable.

Is there anything else I can try ?

Thank you

1 Like

Create an image of the right dimensions (to match the slider size) with a gradient in it.
Place this to the left of your ball, with a z index 1 lower so then right end of the image is below the centre of the ball.
With the drag event change the width of the imagesprite with the gradient to match the ball position.

Does this work ?

2 Likes

It works ! Thank you so much, I didn’t see the set width block before you said it.

Here is an example of how to make your own slider using a canvas and an image for the slider thumb.

MyOwnSlider.aia (20.5 KB)

Using the same technique you can create vertical sliders as in the image below.

AdobeColPicker4.aia (112.9 KB)

3 Likes