Newskit Logo

Volume Control



The VolumeControl component utilises the Slider component, for controlling audio player volume level. The slider has a step of 0.1 and changes a volume number between 0 and 1. The min label is also a clickable mute/unmute button which will set the volume to 0 or back to its previous value on click. The onChange function prop can be used to pass the volume value to the relevant audio player instance, along with also passing the value back down to the VolumeControl.


The volume value, a number between 0 and 1. This value must be updated when onChange is called.
onChange(volume: number) => void
The onChange function receives the new volume value whenever it is changed. Passing this value back into the volume prop is essential to make the slider interactive.
If true, the volume control is rendered vertically rather than horizontally. The volume control will have a height of 100% in vertical mode. To ensure the slider renders as expected, your container must have a height set.
If provided overrides the styles of the slider that builds the VolumeControl. The slider overrides structure can be found in the slider documentation page.
Overrides the stylePreset of the min (mute) and max control buttons.
Overrides the iconSize of the min (mute) and max control buttons.
Overrides the size of the min (mute) and max control buttons.

Refer to the defaults below for the full object structure:

  slider: {
    track: {
      stylePreset: "volumeControlTrack"
    indicator: {
      stylePreset: "volumeControlIndicator"
    thumb: {
      stylePreset: "volumeControlThumb"
  button: {
    stylePreset: "volumeControlButtons",
    iconSize: "iconSize020",
    size: "small"


Use the arrow keys to adjust volume
import React from 'react';
import { StatefulVolumeControl } from 'newskit';

export default () => <StatefulVolumeControl />;