Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chagui

Input range slider

Recommended Posts

Hi gui  :)

 

I made a codepen for you , this is just a prototype code , but maybe that can give u a clue .... :)

 

See the Pen nsyLv by anon (@anon) on CodePen

 

hope this helps ... 

  • Like 2
Link to post
Share on other sites

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 post
Share on other sites

Hi again 

 

at first thanks alot Carl , i`m so glad to hear that   :mrgreen:  pls update the codepen with new one.

and gui i changed the code , made a new codepen for your goal :)

 

See the Pen wtshe by MAW (@MAW) on CodePen

Link to post
Share on other sites

good work warrior , if you achieve to make cursors movable by clicking anywhere on the slide, u'll be the king :)

if not , i 'll take some weak (at least ;) ) to share that with us ;

many thanks to you

 

gui

Link to post
Share on other sites

your welcome , but i`m just a warrior :mrgreen:  , you'r the king , pls pay time for that ...

try , if need any help we'r here :)

Link to post
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 post
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 post
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 post
Share on other sites

@osublake see my exemple i guess a simple div into another should solve ur pb , unset knob width and putt an absolute div in it

Link to post
Share on other sites

Forget what I said above. I think I understand you now. 


 


Instead of using an absolute div, I just extended the bounds to whatever the offset is. I also added a button so you can see it still works when you change the size. 


 


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


 


 


Link to post
Share on other sites

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 post
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 post
Share on other sites

Such an old but good thread. I really should make a new version of that slider.

 

On 3/22/2018 at 5:53 PM, shubich said:

> How to set coordinates in % and save logic?

 

Look at how I'm changing the positioning in the setAbsolute/setRelative functions here.

 

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

 

 

  • Like 2
Link to post
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.

×