VolumeControl

A customizable slider that allows users to adjust video volume interactively, integrated with the video player's state and theme.

Usage

Prop	Type	Required	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	No	`'horizontal'`	Orientation of the slider (horizontal or vertical).
`width`	`number`	No	`100`	Width of the slider (applies when `orientation="horizontal"`).
`height`	`number`	No	`4`	Height of the slider track.
`thumbWidth`	`number`	No	`12`	Width of the draggable thumb.
`trackColor`	`string`	No	Theme `sliderTrackInactive`	Color of the inactive track section.
`progressColor`	`string`	No	Theme `sliderTrackActive`	Color of the active track section.
`style`	`StyleProp<ViewStyle>`	No	–	Optional styles for the container.
`onVolumeChange`	`(volume: number) => void`	No	–	Callback fired when the volume changes.

import { VolumeControl } from 'react-native-video-toolkit';

<VolumeControl />;

import { VolumeControl } from 'react-native-video-toolkit';

<VolumeControl orientation="vertical" height={120} width={6} />;

import { VolumeControl } from 'react-native-video-toolkit';

<VolumeControl width={150} height={6} thumbWidth={16} style={{ marginVertical: 10 }} />;

Volume values range from 0 (muted) to 1 (max).
The control calls setVolume(newVolume) automatically.
Use the onVolumeChange callback to respond to volume changes.
renderBubble is disabled by default (no value tooltip) to keep the UI minimal.