Solutions to IT problems

Solutions I found when learning new IT stuff

Linking JQuery-UI sliders and User Input

leave a comment »


Introduction

Making one slider depend on an other slider but not vice-versa is straight-forward but if both should depend on each other it gets a bit trickier to prevent infinite recursion. Mix that with manual User input to control how the sliders are linked, example: combined maximum value. It’s not rocket science but If you have never done it, also not straight forward.

Starting Point

The web page contains 5 text inputs and 2 JQuery-UI sliders. You will need to reference JQuery, JQuery-UI and a JQUery-UI theme (css). I assume never versions work too. Pages roughly looks like this:

<!--Doctype, Header snipped-->
<link href="css/jquery-ui/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script> 
<!--JavaScript Code snipped-->
<div class="cssform">
    <div>
        <label for="maxValue">Maximum Value:</label>
        <input type="text" id="maxValue" value="100"/>
    </div>
    <div>
        <label for="priceComponentA">Price Component A:</label>
        <input type="text" id="priceComponentA" value="5"/>
    </div>
    <div>
        <label for="priceComponentB">Price Component B:</label>
        <input type="text" id="priceComponentB" value="10"/>
    </div>

    <div class="slider">
            <label for="percentageA">Percentage A:</label>
            <input type="text" id="percentageA"/>
        <div id="slider"></div>
    </div>
    <div class="slider">
            <label for="percentageB">Percentage A:</label>
            <input type="text" id="percentageB"/>
        <div id="slider1"></div>
    </div>
</div>

The maximum value defines how much the 2 “components” can cost together and the Price for the components is per a defined Unit. According to these values it can be calculated how much of component B can be used if X amount of component A is used and vice-versa. The minimum value of the sliders is 0 and the maximum depends on the maximum allowed value and price of the component, eg. if slider for component A is on it’s maximum value, slider for Component B must be 0.

Sliding 1 slider should automatically change the other slider and the displayed value in the according input for that slider. Changing input values should affect the sliders as well.

Solution

I have created a jsFiddle here that demonstrates this functionality.

Please play around to understand the example and then you can adapt it to your needs. Have fun!

Advertisements

Written by kienerj

December 13, 2011 at 15:16

Posted in JavaScript

Tagged with ,

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: