JSFiddle - React, Tailwind, and code Playground

by teknohippy

HTML

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://pastebin.com/raw.php?i=8ugkXxth"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css" />
</head>
<body>
<div class="hml-slider" style=""></div>
    <div id="message">1</div>asd
</body>

CSS

.hml-slider {
    width: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
    pointer: default;
    height: 24px !important;
}

.hml-slider .tick:nth-child(2)
{
    border-left: none !important;
}

.hml-slider .tick { 
    z-index: 2; 
    position: absolute; 
    height: 100%; 
    font-size: 12px; 
    line-height: 22px;
    background: none; 
    border-top: none; 
    border-right: none; 
    border-bottom: none; 
    text-align: center; 
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:default;
    
    text-transform: uppercase;
}

.hml-slider .tick.gj-active
{
    background-color: rgba(0,0,0,0.1) !important;
    font-weight: bold;
}

.hml-slider .ui-slider-handle
{
    height: 32px !important;
}

body {
    padding: 20px;
}

JavaScript

function refreshTickHighlight(slider, value) {
    value--;
    slider.find(".tick").removeClass("gj-active");
    slider.find(".tick:eq(" + value + ")").addClass("gj-active");
}

$(function() {

    // Slider
    $(".hml-slider").slider({
        animate: true,
        min: 0,
        max: 299
    });

    var ticks = ['low', 'medium', 'high'];

    $(".hml-slider").bind("slide", function(event, ui) {
        var value = Math.floor(ui.value / 100) + 1;
        $(this).data("slidervalue", value);
        refreshTickHighlight($(this), value);
        $("#message").html(value);
    });


    $(ticks).each(function(i) {
        var tick = $('<div class="tick ui-widget-content">' + this + '</div>').appendTo($(".hml-slider"));
        tick.css({
            left: (100 / ticks.length * i) + '%',
            width: (100 / ticks.length) + '%'
        });
    });
    
});