title: Using electron to show value on touch bar slider
body: <p>I would like to show the value from the <a href="https://github.com/electron/electron/blob/master/docs/api/touch-bar-slider.md" rel="nofollow noreferrer"><code>TouchBarSlider</code></a> according to where I move it to. An example example of <code>TouchBar</code> can be followed <a href="https://github.com/electron/electron/blob/master/docs/api/touch-bar.md" rel="nofollow noreferrer">here</a>. I still cannot figure out how to display the value using their given method <code>change</code> from <code>TouchBarSlider</code>.</p>
  
  <p>My current <code>main.js</code> looks like the following.</p>
  
  <pre><code>const {app, BrowserWindow, TouchBar} = require('electron')
  
  const {TouchBarLabel, TouchBarSlider} = TouchBar
  const slider = new TouchBarSlider({label: 'angle',
                                     minValue: 0,
                                     maxValue: 360})
  const result = new TouchBarLabel()
  result.label = '30' + ' deg'; 
  
  const updateBar = () =&gt; {
    let timeout = 100;
    if (slider.change()){
      result.label = slider.values.toString() + ' deg'
    }
    setTimeout(updateBar, timeout)
  }
  
  const touchBar = new TouchBar([
    slider, // add slider
    result // add display for slider value but doesn't work yet
  ])
  
  let window;
  
  app.once('ready', () =&gt; {
    window = new BrowserWindow({
      width: 300,
      height: 200
    });
    window.loadURL('about:blank')
    window.setTouchBar(touchBar);
  })
  
  // Quit when all windows are closed and no other one is listening to this.
  app.on('window-all-closed', () =&gt; {
      app.quit();
  });
  </code></pre>
  
  <p>I also have example repository <a href="https://github.com/titipata/touchbar-example" rel="nofollow noreferrer">here</a>. You can just replace my given <code>main.js</code> in the project in order to try things out. My <strong>electron</strong> version is <code>1.6.4</code> and <strong>node</strong> version is <code>7.4.0</code></p>