JSFiddle - React, Tailwind, and code Playground

by narklord

HTML

<!-- The anchor container for our slider -->
<div id="main-container">
    <div id="slider-container"></div>
    <h2 id="range-value"></h2>
</div>

CSS

#main-container {
    background-color: #00A8FF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#slider-container {
    width: 300px;
    margin: 20px auto;
}

#range-value {
    text-align: center;
}

.ui-slider {
    position: relative;
    height: 8px;
    width: 100%;
    margin: 15px 0;
}
.ui-slider-range {
    position: absolute;
    height: 8px;
    background-color: #FF6329;
    cursor: grab cursor: -webkit-grab;
}

.ui-slider-handle-origin {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.ui-slider-handle {
    position: relative;
    height: 16px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 5px 0px #BEBEBE inset;
    border-radius: 2px;
    width: 16px;
    top: -4px;
    left: -8px;
    cursor: pointer;
}

.ui-slider-background {
  background-color: #CCCCCC;
}

.ui-slider-connect {
  background-color: #FF6329;
}

JavaScript

/**
 * RangeRider v0.1
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2014 James Alexander Blight
 *  Permission is hereby granted, free of charge, to any person obtaining a copy
 *  of this software and associated documentation files (the "Software"), to deal
 *  in the Software without restriction, including without limitation the rights
 *  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *  copies of the Software, and to permit persons to whom the Software is
 *  furnished to do so, subject to the following conditions:
 *
 *  The above copyright notice and this permission notice shall be included in all
 *  copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

'use strict';

// Module support for AMD and CommonJS
// rangerider attaches to the global object if not module definition found
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['rangerider'], factory);
    } else if(typeof module === 'object' && module.exports) {
        module.exports = factory();
    } else {
        root.rangeRider = factory();
    }
}(this, function () {

    var
    // list of classes to apply to the slider
        classes = [
            'ui-slider-target',         // 0
            'ui-slider',                // 1
            'ui-slider-range',          // 2
            'ui-slider-handle',         // 3
            'ui-slider-handle-origin',  // 4
            'ui-selected',              // 5
           ...