JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<div id="slider-wrapper">
    <p id="slider-value-wrapper"><span class="value">0</span>%</p>
    <div id="slider-content">
        <button class="minus ui-button-small">-</button>
        <div id="slider"></div>
        <button class="plus ui-button-small">+</button>
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    padding: 20px;
}
.ui-button-small {
    font-size: 1em;
    height: 1em!important;
    width: 1em !important;
    line-height: 1em;
}
#slider-wrapper, p {
    text-align: center;
    width: 600px;
}
#slider-wrapper #slider-content > * {
    display: inline-block;
    float: left;
    margin: 3px;
    border-radius: 0px !important;
}
#slider-wrapper #slider-content #slider {
    margin: 7px 5px 0 4px;
    width: 500px;
    height: 7px;
    border-radius: 0px;
}
#slider-wrapper #slider-content #slider a {
    cursor: pointer;
    top: -7px;
    margin-left: -1px;
    left: 0;
    width: 5px;
    height: 20px;
    border-radius: 0px;
}

JavaScript

var slider = $("#slider-wrapper #slider"),
        plus = $('#slider-wrapper .plus'),
        minus = $('#slider-wrapper .minus'),
        value = $('#slider-value-wrapper .value'),
        min = 0,
        max = 400,
        new_value;

    function updateView(new_value) {
        value.text(new_value);
    }

    function getCurrentSliderValue() {
        return slider.slider("option", "value");
    }

    function setNewSliderValue(new_value) {
        slider.slider("value", new_value);
        updateView(new_value);
    }
    // Buttons
    $('#slider-wrapper .plus').button({
        icons: {
            primary: "ui-icon-plus"
        },
        text: false
    });
    $('#slider-wrapper .minus').button({
        icons: {
            primary: "ui-icon-minus"
        },
        text: false
    });
    // Slider
    $("#slider-wrapper #slider").slider({
        range: "min",
        min: min,
        max: max,
        step: 10,
        slide: function (event, ui) {
            console.log(ui.value);
            updateView(ui.value);
        },
        create: function (event, ui) {

            console.log(ui);
        }
    });

    plus.click(function () {
        new_value = getCurrentSliderValue() + 10;
        if (new_value > max) return false;
        setNewSliderValue(new_value);
    });
    minus.click(function () {
        new_value = getCurrentSliderValue() - 10;
        if (new_value < min) return false;
        setNewSliderValue(new_value);
    });