JSFiddle - React, Tailwind, and code Playground

HTML

<p>Third parties can listen to the proposed <code>move</code> event to be notified when the knob moves. The event is required by the demo to update the <em>highlight</em> element, which was not possible with the events provided by the original Slider class.</p>

<div class="container">   
    <div class="slider">
        <div class="slider-highlight"></div>
        <div class="slider-knob"></div>
    </div>
    
    <div class="radio-group">
        <label class="checked"><input type="radio" value="1" name="surface" checked="checked" /> 10m²</label>
        <label><input type="radio" value="2" name="surface" /> 20m²</label>
        <label><input type="radio" value="3" name="surface" /> 30m²</label>
        <label><input type="radio" value="4" name="surface" /> 40m²</label>
    </div>
</div>

CSS

body {
    background: #EDEDED;
    font-family: Helvetica, Arial, sans-serif;
}

p {
    margin-bottom: 2em;
}

.container {
    width: 300px;
}

.slider {
    background: linear-gradient(to bottom, #d2d2d1, #ededed);
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 1px 1px white;
	height: 11px;
	margin: 20px;
	position: relative;
}

.slider-highlight {
	height: 8px;
	top: 2px;
	left: 2px;
	background: #ee3031;
	width: 5px;
	border-radius: 3px;
	position: absolute;
}

.slider-knob {
	background: linear-gradient(to bottom, #f9f9f9, #f0f0f0, #e0e0e0);
    border: 1px solid #bebebe;
    border-radius: 3px;
    height: 20px;
	width: 20px;
	position: absolute;
	top: -5px;
}

.radio-group label {
	display: block;
	width: 25%;
	text-align: center;
	float: left;
}

.radio-group label.checked {
	font-weight: bold;
}

.radio-group input {
	display: none;
}

JavaScript

/*
---

script: Slider.js

name: Slider

description: Class for creating horizontal and vertical slider controls.

license: MIT-style license

authors:
  - Valerio Proietti

requires:
  - Core/Element.Dimensions
  - Class.Binds
  - Drag
  - Element.Measure

provides: [Slider]

...
*/

var Slider = new Class({

	Implements: [Events, Options],

	Binds: ['clickedElement', 'draggedKnob', 'scrolledElement'],

	options: {/*
		onTick: function(intPosition){},
		onMove: function(){},
		onChange: function(intStep){},
		onComplete: function(strStep){},*/
		onTick: function(position){
			this.setKnobPosition(position);
		},
		initialStep: 0,
		snap: false,
		offset: 0,
		range: false,
		wheel: false,
		steps: 100,
		mode: 'horizontal',
		initialized: false
	},

	initialize: function(element, knob, options){
		this.setOptions(options);
		options = this.options;
		this.element = document.id(element);
		knob = this.knob = document.id(knob);
		this.previousChange = this.previousEnd = this.step = -1;

		var limit = {},
			modifiers = {x: false, y: false};

		switch (options.mode){
			case 'vertical':
				this.axis = 'y';
				this.property = 'top';
				this.offset = 'offsetHeight';
				break;
			case 'horizontal':
				this.axis = 'x';
				this.property = 'left';
				this.offset = 'offsetWidth';
		}

		this.setSliderDimensions();
		this.setRange(options.range);

		if (knob.getStyle('position') == 'static') knob.setStyle('position', 'relative');
		knob.setStyle(this.property, -options.offset);
		modifiers[this.axis] = this.property;
		limit[this.axis] = [-options.offset, this.full - options.offset];

		var dragOptions = {
			snap: 0,
			limit: limit,
			modifiers: modifiers,
			onDrag: this.draggedKnob,
			onStart: this.draggedKnob,
			onBeforeStart: (function(){
				this.isDragging = true;
			}).bind(this),
			onCancel: function(){
				this.isDragging = false;
			}.bind(this),
			onComplete: function(){
				this.isDragging =...