Tinydash Widgets

Hello everybody,

In continuation of another thread: http://forum.espruino.com/conversations/327325/#comment14492142

I am working my way on learning html+css+js while improving tinydash.

Got initially a scrollbar running and generating events.

The look is not compatible with the other widgets yet.

What would be the correct/best way to center the bar... < center > html tag or css?

add to tinydash.css:

.td_slider_container {
  width: 100%;
}

.td_slider {
  -webkit-appearance: none;
  width: 90%;
  height: 15px;
  border-radius: 8px;   
  background: [#d3d3d3](https://forum.espruino.com/search/?q=%23d3d3d3);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.td_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: [#4CAF50](https://forum.espruino.com/search/?q=%234CAF50);
  cursor: pointer;
}

.td_slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: [#4CAF50](https://forum.espruino.com/search/?q=%234CAF50);
  cursor: pointer;
}

/* Mouse-over effects */
.td_slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

add to tinydash.js:

    /* {slider} */
    TD.slider = function(opts) {
      var el = setup("slider", opts,
          toElement('<div class="td td_slider_container"><span>' + opts.label + '</span><center><br><br><input type="range" min="' + opts.min + '" max="' + opts.max + '" value="' + opts.value + '" class="td_slider"</center></br></br></div>'));
      el.setValue = function(v) {
        el.setAttribute("value", v);
      };
      el.oninput = function(x) {
        sendChanges(el, x.srcElement.value);
      };
      return el;
    };

1 Attachment