Hiyve Components - v1.0.0
    Preparing search index...

    Interface GainControlStyles

    Style configuration for the GainControl component.

    Controls the visual appearance and icon behavior thresholds. The volume thresholds determine which icon is displayed at different volume levels.

    const customStyles: Partial<GainControlStyles> = {
    thumbSize: 20,
    lowVolumeThreshold: 25, // volumeMute below 25%
    mediumVolumeThreshold: 60, // volumeDown below 60%, volumeUp above
    };

    <GainControl styles={customStyles} onChange={handleChange} />
    interface GainControlStyles {
        gap: number;
        labelWidth: number;
        lowVolumeThreshold: number;
        mediumVolumeThreshold: number;
        minSliderLength: number;
        thumbSize: number;
        valueDisplayWidth: number;
    }
    Index

    Properties

    gap: number

    Gap between elements in pixels

    labelWidth: number

    Width of the label in horizontal mode

    lowVolumeThreshold: number

    Volume threshold for low icon (below this shows volumeMute)

    mediumVolumeThreshold: number

    Volume threshold for medium icon (below this shows volumeDown, above shows volumeUp)

    minSliderLength: number

    Minimum length of the slider in pixels

    thumbSize: number

    Size of the slider thumb in pixels

    valueDisplayWidth: number

    Width of the value display