Recreating the volume slider

As you would expect, the volume slider is also a SliderComponent.

volumeSlider = new SliderComponent
    width: 266
    height: 3
    backgroundColor: progressBar.backgroundColor
    knobSize: 28
    x: 50
    y: 559
    parent: $.Now_Playing
    value: 0.75

This slider’s backgroundColor is the same as the progressBar’s.

The volume in the design was set at 75%, so we follow that by setting the SliderComponent’s value.

Its fill also has the same color as the progressBar’s.

volumeSlider.fill.backgroundColor = progressBar.fill.backgroundColor

The knob keeps its default white color but has a different shadow, and it has a very thin border of only 0.5 points.

volumeSlider.knob.props =
    borderColor: "#ccc"
    borderWidth: 0.5
    shadowY: 3
    shadowColor: "rgba(0,0,0,0.2)"
    shadowBlur: 4

The slider should now look the same as the one in the Sketch design.

Before adding it, we’ll set the actual volume of the audio player also at 75%.

audio.player.volume = 0.75

And analogous to the earlier showProgress(), showTime() and showTimeLeft() functions there’s also a showVolume():

audio.showVolume volumeSlider

We can now make the original Sketch layer disappear:

$.Volume_slider.visible = no

A working volume slider