JSFiddle - React, Tailwind, and code Playground

by mistakster

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<div class="linear">
    <div class="linear__slider slider"></div>
    <div class="linear__value value">500000</div>
</div>
<div class="logarithmic">
    <div class="logarithmic__slider slider"></div>
    <div class="logarithmic__value value">500000</div>
</div>

CSS

.ui-slider {
    margin: 1em;
    width: 400px;
}
.value {
    margin: 1em;
    width: 400px;
    text-align: right;
}
.tsp {
    font-size: 50%;
    line-height: 1;
}

JavaScript

function fromSlider(value) {
    return Math.round(Math.pow(10, value));
}

function toSlider(value) {
    return Math.log(value) / Math.log(10);
}


function round(n, threshold) {
    var digits, out;

    n = n.toFixed(0);
    digits = n.length;
    out = n.substr(0, Math.min(digits, threshold));

    if (digits > threshold) {
        out = out + "000000000000".substr(0, digits - threshold);
    }

    return parseInt(out);
}

function toMoney(n) {
    var digits, delim = '<span class="tsp"> </span>';

    n = n.toFixed(0);
    digits = n.length > 3 ? n.length % 3 : 0;

    return (digits ? n.substr(0, digits) + delim : '') + n.substr(digits).replace(/(\d{3})(?=\d)/g, "$1" + delim);
}

var initialValue;

// logarithmic slider

initialValue = parseInt($(".logarithmic__value").text());

$(".logarithmic__slider").slider({
    min: toSlider(1000),
    max: toSlider(10000000),
    step: 0.01,
    value: toSlider(initialValue),
    slide: function (e, ui) {
        $(".logarithmic__value").html(toMoney(round(fromSlider(ui.value), 2)));
    }
});

$(".logarithmic__value").html(toMoney(initialValue));

// linear slider

initialValue = parseInt($(".linear__value").text());

$(".linear__slider").slider({
    min: 1000,
    max: 10000000,
    step: 1,
    value: initialValue,
    slide: function (e, ui) {
        $(".linear__value").html(toMoney(round(ui.value, 2)));
    }
});

$(".linear__value").html(toMoney(initialValue));