VolumeControl

VolumeControl is a customizable slider that lets users adjust video volume interactively.
It integrates with the video player's state and adapts to the active theme.

---

Usage

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

const MyVolume = () => {
  return <VolumeControl />;
};

---

Props

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 secondary	Color of the inactive track section.
progressColor	string	No	Theme primary	Color of the active track section.
style	StyleProp<ViewStyle>	No	–	Optional styles for the container.

---

Examples

Default VolumeControl

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

<VolumeControl />;

Vertical Slider

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

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

Custom Size & Style

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

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

---

info

• Volume values range from 0 (muted) to 100 (max).
• The control calls setVolume(newVolume) automatically.
• renderBubble is disabled by default (no value tooltip) to keep the UI minimal.