You are reading a single comment by @barbiani and its replies. Click here to read the full conversation.
  • 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](http://forum.espruino.com/sear­ch/?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](http://forum.espruino.com/sear­ch/?q=%234CAF50);
      cursor: pointer;
    }
    
    .td_slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: [#4CAF50](http://forum.espruino.com/sear­ch/?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></di­v>'));
          el.setValue = function(v) {
            el.setAttribute("value", v);
          };
          el.oninput = function(x) {
            sendChanges(el, x.srcElement.value);
          };
          return el;
        };
    

    1 Attachment

    • Clipboard02.jpg
About

Avatar for barbiani @barbiani started