This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Sergey Yashchuk
Posted Oct 02 - Read on Facebook

Hi guys,

Can some one please help me with the Slider component.

I'm trying to create a slider wth the gradient. Gradient reveals when user drags knob from left to right. The problem is that when I assign gradient to the fill it scales instead of distributing across the width of the slider (i guess it's by design). On the other hand it distributes fine when I assign gradient to the background/image of the slider, but now it reveals from the other side. I also tried it to rotate 180, but it did not work :)



Jordan Robert Dobson

So you want to create a clipping parent layer with a child layer containing the gradient that is the width of the slider track.

Then you set that parent layer to clip: true and modify it’s width to expose more or less of the contained gradient child layer.

Now listen for events on the full like

slider.fill.on “change:width, ->
print slider.fill.width

Assign the width of the fill to the clipping parent. They should now match.

Now place the clipping layer in the slider.

You might also just be able to put the gradient layer inside the fill as a child and make sure the fill is set to clip.

Let me know if that makes sense at all.

Read the entire post on Facebook