Percentulator

stocks and easy percenting

by Joe Saad

HTML

<div id="slider" class="slider">
    <div class="knob"></div>
</div>
<input type="text" id="orgNum" />
<div id="percent"></div>
<input type="text" id="calNum" />

CSS

body {padding:20px;}
.slider {
    background: #CCC;
    height: 16px;
    width: 200px;
}
    .slider .knob {
        background: #000;
        width: 16px;
        height: 16px;
    }

#calNum {
    height: 50px;
    line-height: 50px;
}

.advanced {
    width: 400px;
    margin: 5px 0;
    background: #CCC;
}
    .advanced .knob {
        cursor: pointer;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
#red .knob {
    background: red;
}
#green .knob {
    background: green;
}
#blue .knob {
    background: blue;
}

JavaScript

window.addEvent('domready', function() {

    var slider = $('slider');
    var calculated;

    new Slider(slider, slider.getElement('.knob'), {
        range: [-100, 100],
        initialStep: 0,
        onChange: function(value) {
            //  if (value) $('calNum').setStyle('font-size', value);
            var orgNum = $('orgNum').get('value'); 
            calculated = parseFloat((value / 100) * orgNum) + parseFloat(orgNum);
           calculated =  Math.round(calculated*Math.pow(10,2))/Math.pow(10,2);
            
            $('percent').set('text', value + '%');
            if (calculated) {
            $('calNum').set('value', calculated);
            }
            if (value > 0) { 
                $('percent').setStyle('color', 'green');
            }
            else {
                $('percent').setStyle('color', 'red');
            }
        }

    });

});