JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" />
    <style>
    #slider2{width: 800px;}
    .steps-2 {
    border: 1px solid transparent; /*follows #slider2 style for sizing purposes */
    width: 800px; 
    position: relative; 
    height: 30px;
    }
    .tick { 
        border: 1px solid transparent; /*follows slide handle style for sizing purposes*/
        position: absolute;
        width: 1.2em;
        margin-left: -.6em;
        text-align:center;
        left: 0;
    }
    </style>
    </head>
    <body style="background: #EEEEEE; color: #333333; font-size: 11px;">
        <div style="width:404px;display:block;margin:200px auto;">
            <p>
                <label for="amount">Donation amount ($100 increments):</label>
                <input type="text" id="amount" style="border: 0 none;border-radius: 4px 4px 4px 4px;color: #F6931F;padding-left: 5px;width: 40px;">
            </p>

            <div id="slider" style="width:400px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://codefusionlab.com/slider_steps2.html#" style="left: 20%; "></a></div>

            <div class="steps">
                <span style="display:inline-block;width: 3%;text-align:left;margin-right: 13%;">|<br>$0</span>
                <span style="display:inline-block;width: 7%;text-align:center;margin-right: 12%;">|<br>$100</span>
                <span style="display:inline-block;width: 7%;text-align:center;margin-right: 12%;">|<br>$200</span>
                <span style="display:inline-block;width: 7%;text-align:center;margin-right: 12%;">|<br>$300</span>
                <span style="display:inline-block;width:...

JavaScript

$(function() {
        $( "#slider" ).slider({
            value:100,
            min: 0,
            max: 500,
            step: 100,
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.value );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );

        $( "#slider2" ).slider({
            value:100,
            min: 0,
            max: 500,
            step: 100,
            slide: function( event, ui ) {
                $( "#amount2" ).val( "$" + ui.value );
            }
        });
        $( "#amount2" ).val( "$" + $( "#slider2" ).slider( "value" ) );
    });