JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<label for="helm.thrust">helm.thrust</label>
<input type="range" min="-50" max="100" value="0" class="slider" id="helm_thrust" />

<label for="engineering.shields">engineering.shields</label>
<input type="range" min="0" max="100" value="50" class="slider" id="engineering_shields" />

CSS

input, label{
    display: block;
}

JavaScript

var data = {
    helm_thrust: 0,
    helm_cats: 0,
    helm_fish: 0,
    engineering_shields: 0
};
var sliderChangeHandler = function(event) {
    var element = event.currentTarget
    data[element.id] = element.value;
    console.log(data[element.id]);
};
$(document).on('change','.slider',sliderChangeHandler);