JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<div id="slider"></div>

SCSS

#slider{
    position: relative;
    margin: 40px;
    .tray{
        position: relative;
        display: inline-block;
        top: 0;
        left: 0;
        width: 200px;
        height: 20px;
        margin: 0 20px;
        vertical-align: top;
        cursor: pointer;
    }
    .bar{
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #000;
    }
    .handle-holder{
        position: absolute;
        top: 50%;
        left: 0;
        .handle{
            background-color: #888;
            border-radius: 20px;
            position: relative;
            margin-left: -50%;
            margin-top: -50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        .handle-label-holder{
            position: absolute;
            top: -40px;
            .handle-label-text{
                margin-left: -50%;   
            }
        }
    }
    .min-label, .max-label{
        display: inline-block;
        height: 100%;
        vertical-align: top;
    }
}

JavaScript

var slider = new RangeSlider({
    parentNode: document.querySelector('#slider'),
    step: 10
});
slider.value(50);


function RangeSlider(options){
	function extend(o){
		for (var i = 1, len = arguments.length; i < len; i++){
			for (var key in arguments[i]){
				o[key] = arguments[i][key];
			}
		}
		return o;
	}

	var defaults = {
		min: 0,
		max: 100,
		step: 1,
		parentNode: null,
		animSpeed: 12
	};

	extend(this, defaults, options);

	//make div elements

	var el = this.el = document.createElement("div");
	el.className = "slider";

	var minLabel = document.createElement("div");
	minLabel.className = "min-label";
	minLabel.innerHTML = this.min;
	el.appendChild(minLabel);

	var tray = document.createElement("div");
	tray.className = "tray";
	el.appendChild(tray);

	var maxLabel = document.createElement("div");
    maxLabel.className = "max-label";
	maxLabel.innerHTML = this.max;
	el.appendChild(maxLabel);

	var bar = document.createElement("div");
	bar.className = "bar";
	tray.appendChild(bar);

	var handleHolder = document.createElement("div");
	handleHolder.className = "handle-holder";
	tray.appendChild(handleHolder);

	var handle = document.createElement("div");
	handle.className = "handle";
	handleHolder.appendChild(handle);

	var handleLabel = document.createElement("div");
	handleLabel.className = "handle-label-holder";
	handleHolder.appendChild(handleLabel);

	var handleLabelText = document.createElement("div");
	handleLabelText.className = "handle-label-text";
    handleLabelText.innerHTML = 0;
	handleLabel.appendChild(handleLabelText);

	if (this.parentNode){
		this.parentNode.appendChild(this.el);
	}

	var _value = 0;
	this.value = function(val, ease){
		if (typeof val === "number"){
            //clamp value to range
			_value = Math.max(this.min, Math.min(val, this.max));
            //settle value on step interval
            _value = Math.round(_value / this.step) * this.step;
			// set handle position
            if (!ease){
               ...