JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<p id="base"></p>
<p id="auth"></p>
<p id="street"></p>
<p id="cust"></p>
<div id="slider_wrapper">
    <svg id="slider" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
</div>

JavaScript

var obj = {
    base: 100,
    auth: 110,
    street: 180,
    cust: 200
}

slider = {
    init: function () {
        $.each(obj, function (i, d) {
            $("#" + i).html(i + " " + d);
        });
    },
    draw: function () {
        var svg = $("#slider");
        //draw from 0 to lowest number
        svg.append("<rect width='" + obj.base + "' height='67' style='fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)'/>");
        //lowest to 2nd lowest
        svg.append("<rect x='" + obj.base + "' width='" + obj.auth - obj.base + "' height='67' style='fill:rgb(255,0,255);stroke-width:1;stroke:rgb(0,0,0)'/>");
        //2nd lowest to 2nd highest
        //2nd highest to highest
        //check auth level and change it to slope-d polygon
        
        slider.refresh();
    },
    refresh: function(){
        $("#slider_wrapper").html($("#slider_wrapper").html());
    }
}

slider.init();
slider.draw();