JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<div id='sandbox'></div>

CSS

#sandbox {
    position: relative;
}

/** Hack out a circle with a 50%-width rounded border. */ 
.bestCircleEver {
    background: gold; /** Cause gold is royal and stuff. */
    border: 2px solid orange; /** Cause orange is like gold. */
    border-radius: 50%; /** To hack out a circle. */
    position: relative;
}

.bestSliderEver {
    left: 0;
    position: absolute;
    top: 70px;
}

.valueDisplayer {
    left: 0;
    position: absolute;
    top: 90px;
}

JavaScript

// Set some bounds.
var sliderMin = 1;
var sliderMax = 1000;
var initialValue = 500;

// Make a slider.
var bestSliderEver = document.createElement('input');
bestSliderEver.className = 'bestSliderEver';
bestSliderEver.type = 'range';
bestSliderEver.min = sliderMin;
bestSliderEver.max = sliderMax;
bestSliderEver.value = initialValue;
var sliderWidth = 200;
bestSliderEver.style.width = String(sliderWidth) + 'px';

// Make a box for displaying the value.
var valueDisplayer = document.createElement('div');
valueDisplayer.className = 'valueDisplayer';

// Make a circle.
var circle = document.createElement('div');
circle.className = 'bestCircleEver';
function setCircleSettings() {
    var sliderValue = bestSliderEver.value;
    var radius = sliderValue / 50;
    var circumference = 2 * radius;
    var circumferenceString = String(circumference) + 'px';
    circle.style.width = circumferenceString;
    circle.style.height = circumferenceString;
    circle.style.marginLeft = String(-1 * radius - 2) + 'px';
    var proportionFromLeft = (sliderValue - sliderMin) / (sliderMax - sliderMin);
    //circle.style.left = String(proportionFromLeft * sliderWidth) + 'px';
    //circle.style.top = String(50 - Math.floor(proportionFromLeft * (circumference + 4))) + 'px';
}

// Puts the right value into the displayer under the slider.
function populateValueDisplayer() {
    valueDisplayer.innerHTML = bestSliderEver.value;
}

// Reacts when the slider changes.
function onSliderChange (sliderChangeEvent) {
    // Update the displayer value.
    populateValueDisplayer();
    setCircleSettings();
};

// Initialize all the things.
function initialize() {
    // Tell everything to listen to the slider.
    // Ths slider's the center of attention - kind of a big deal.
    bestSliderEver.addEventListener(
        'input', onSliderChange, false);
    populateValueDisplayer();
    setCircleSettings();
    
     // Display the slider.
    var sandbox = document.getElementById('sandbox');
   ...