How to link two jQuery UI sliders together

I recently used jQuery UI sliders on a project and had to link them together so that the value of one couldn’t be greater that the value of the other, and the value of the other couldn’t be less than the value of the one.  It’s probably easier if I just show you:


Check out this Pen!


If you drag the top slider to the right you’ll see that the bottom slider moves with it when they reach the same value, and the same if you slide the bottom one to the left.

It works by running a conditional statement on the slider ‘slide’ event to check whether the value of slider one is greater than slider two. If it is then adjust slider two to match, and vice-versa.  Pretty simple stuff, but I thought it might be useful to someone else.

Click on the JS tab on the CodePen above to grab the jQuery code, or view it on CodePen here.

Feel free to add your comment..

Your email address will not be published.