Mithril Slider

CSS

.left {
  width: 75%;
}
.right {
  background: darkred;
  height: 20px;
  width: 40%;
}

-webkit-slider-thumb{
  background: steelblue;
}

JavaScript

const App = {};

App.controller = function() {
  return {
    data:  m.prop({r: 0, g: 255, b: 0}),
    background() {
      return `rgb(${this.data().r}, ${this.data().g}, ${this.data().b})`;
    }
  };
};
  
    
App.view = c => [
  ['r', 'g', 'b'].map(d =>
    m("div.left", 
      m("input[type='range']", {
       min: "0", 
       max: "255", 
       value: c.data()[d],
       oninput(e) { 
         c.data()[d] = e.target.value;
         return console.log(c.background());
       }
      }),
      m("label", `${d}: ${c.data()[d]}`))
  ),
   m("div.right", 
     {style: `background:${c.background()};`})
  ] ;
  
        
m.mount(document.body, App);