Money Slider

by daraand

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.getuikit.com/docs/css/uikit.docs.min.css">
<script src="http://www.getuikit.com/dist/js/uikit.min.js"></script>
<div class="uk-grid uk-text-center uk-panel-box">
    <div id="credit-card-div" class="uk-width-1-1">
        <p><span class="uk-margin-bottom"><label for="amount">Power up TheorySend! </label></span>

        </p> <span class="uk-text-success" style="position:relative;top:-5px;left:-5px">$</span>
        <input type="text" id="amount" value="8" class="uk-text-success uk-text-large uk-text-center" style="border:0;position: relative;top: -0.125em;width:50px;left: -0.2em;">
        </p>
        <div class="slider-bar uk-align-center" id="slider-range-min"></div><span style="position: absolute;top: 4.1em;left: 23.7%;" class="uk-text-bold uk-text-primary uk-text-large">+</span><span style="position: absolute;top: 4.1em;right: 24.1%;" class="uk-text-bold uk-text-primary uk-text-large">-</span>

    </div>
    <div class="uk-width-1-1 uk-margin-top">
        <button id="creditcard" class="uk-button uk-button-primary" type="button" onclick="document.location.href='http://shop.theoryanimation.com/cart/1046076096:3';">Power Up!</button>
        <br> <span class="uk-text-muted uk-text-small">Accepts Card, PayPal and BitCoin</span>

    </div>
</div>

CSS

.slider-bar {
    height: 5px;
    position: relative;
    width: 50%;
}
.ui-widget-content {
    border: 0px;
    background: #F35F55;
}
.ui-widget-header {
    background: #5ED160;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0px;
    background: url(http://dev.theoryanimation.com/images/shop/george_slider.png) 50% 50% no-repeat;
    font-weight: normal;
    color: #555555;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 28px;
    cursor: default;
    top: -1em;
}

JavaScript

$(function () {

        $("#slider-range-min").slider({
            range: "min",
            value: 8,
            min: 1,
            max: 50,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
                $("#creditcard").attr('onclick', "document.location.href='http://shop.theoryanimation.com/cart/1046076096:" + ui.value + "';");
                $("#shopify_buy").attr('onclick', "document.location.href='http://shop.theoryanimation.com/cart/1046076096:" + ui.value + "';");
            }
        });
        $("#amount").keyup(function () {
            $("#slider-range-min").slider("value", $(this).val())
        });
    });