Using electron to show value on touch bar slider - node.js

Question

I would like to show the value from the TouchBarSlider according to where I move it to. An example example of TouchBar can be followed here. I still cannot figure out how to display the value using their given method change from TouchBarSlider.
My current main.js looks like the following.
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 = () => {
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', () => {
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', () => {
app.quit();
});
I also have example repository here. You can just replace my given main.js in the project in order to try things out. My electron version is 1.6.4 and node version is 7.4.0

Answer 1

const { app, BrowserWindow, TouchBar } = require('electron');
const path = require('path')
const url = require('url')
const {TouchBarButton, TouchBarLabel, TouchBarSlider} = TouchBar
const result = new TouchBarLabel();
result.label = '30' + ' deg';
const slider = new TouchBarSlider({
label: 'angle',
minValue: 0,
maxValue: 360,
change: (val) => result.label = val.toString() + ' deg' // register event handler here!
});
const touchBar = new TouchBar([
slider, // add slider
result // add display for slider value
]);
let window;
app.once('ready', () => {
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', () => {
app.quit();
});
Working code. Hope this helps! ;)