Jump to content
Search Community

Input range slider

chagui test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi AncientWarrior

 

Thanx for that , i was thinking in this kind. But how do you make for fixing begin strating points position and min/max values in this logic ?!

lets say we need a slider 0 min 100max and a starting position with firstpoint at 55 and second point at 80  :)

guess itsnot so easy !

 it take me 12hours to generate my poor try : 

See the Pen tkbui?editors=101 by anon (@anon) on CodePen

, but i like this library so i don't givup...

 i  have taken all my afternoon for trying to move cursors slider by clicking.., no way for me at this moment ..lol

 

gui

  • Like 1
Link to comment
Share on other sites

Hi Warrior,

 

I updated the pen here: http://codepen.io/GreenSock/pen/pykxi

 

Very nice.

 

Chaqui, we really have to focus on how to use the GreenSock API. Adding keyboard controls to custom components is a bit beyond what we normally handle for support. Ancient Warrior went well beyond community standards by building that very robust component. He brings his family great honor. 

  • Like 1
Link to comment
Share on other sites

If you want to use the Draggable util to make a slider, scrubber, etc., you need to take in account the width of what you are dragging. Notice in Warrior's example how the max only goes to 381 when it should go to 400. To fix this you need to offset the range based on the position of the draggable.

 

To be able to click anywhere on the slider and start dragging, turn your slider into a static draggable and then select what you want to drag.

 

Here's the updated pen. I moved the knobs down so you can see how the range is being offset.

 

See the Pen bEcBH by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi all,

 

It sould be great to set a simple auto scale function with draggable...I didn't see any scale function in the API to perform what i did in my codepen example bellow with a min value at left left:0 of the div..( seems not possible with minX ) .

The width div have now no more dependance with the scale you 're choosing,

play with the  5 variable at top of document ,  there is a randonCSS variable to test autoscale(disable auto update and hit the script)

 

See the Pen IqlGh?editors=001 by anon (@anon) on CodePen

Link to comment
Share on other sites

  • 3 years later...

Hi everyone!

I making familiar range slider and have a question. 

In my case left slider shouldn't go beyond the right one and vice versa.

I did it, but question is:

> How to set coordinates in % and save logic?

When I set left property, other features doesn't work.

TweenLite.set(this.leftKnob.target, {
  left: '0%',
  onUpdate: this.leftKnob.update,
  onUpdateScope: this.leftKnob
});

TweenLite.set(this.rightKnob.target, {
  left: '100%',
  onUpdate: this.rightKnob.update,
  onUpdateScope: this.rightKnob
});

So, I can use container.offsetWidth, but I think it's not a good idea. 

This way I must calculate this value every time on browser window size change.

My code is

See the Pen mxmoQz by shubich (@shubich) on CodePen

.

Link to comment
Share on other sites

@shubich You will need to calculate and save percentage to variables every time slider is moved so you can recalculate them on resize. A better way would to create everything as object so even if you end up using more then one slider you won't have to code everything again. Plus using objects will make it easy for you to organize properties.

 

Not sure what your code does, I think you are confusing it with @OSUblake's approach of setting bounds. When you drag something, the left property doesn't animate. Draggable changes x/y translate of the target element. So you will need to use this.x to retrieve x translate inside the onDrag event callback. Then you can use that value to calculate percentage and on resize you can calculate new position of slider handles. Does that help?

  • Like 2
Link to comment
Share on other sites

  • 3 years later...

Hi there, I am hoping someone can help me here.

 

I am looking to see how simple this would be to flip on the y axis? I have tried changing some of the values and the styles so the range works vertically but not having any luck.

 

I have a codepen which I am working on currently if that helps. Would love some pointers on how to get this working :D

 

See the Pen bGWdgRY by jackkemm (@jackkemm) on CodePen

 

I know it's using old GSAP too, but for now it is just a direct copy of the example above.

 

Thanks in advance for any help.

 

Jack

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...