@buddhacognitivelab/theme-glassmorphic
Version:
Enhanced glassmorphic theme package with dual-mode support, advanced glass effects, interactive UI components, and gesture-based interactions
72 lines (71 loc) • 2.56 kB
TypeScript
/**
* @fileoverview RangeInput component with glassmorphic styling and dual-handle support
*/
import React from 'react';
export interface RangeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd' | 'defaultValue' | 'value'> {
/** Current value (for single handle) or range values (for dual handle) */
value?: number | [number, number];
/** Default value */
defaultValue?: number | [number, number];
/** Minimum value */
min?: number;
/** Maximum value */
max?: number;
/** Step increment */
step?: number;
/** Whether to use dual handles for range selection */
dual?: boolean;
/** Callback when value changes */
onChange?: (value: number | [number, number]) => void;
/** Callback when dragging starts */
onDragStart?: (value: number | [number, number]) => void;
/** Callback when dragging ends */
onDragEnd?: (value: number | [number, number]) => void;
/** Size variant */
size?: 'small' | 'medium' | 'large';
/** Visual variant */
variant?: 'default' | 'filled' | 'outlined';
/** Color variant */
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
/** Glass effect intensity */
glassIntensity?: 'light' | 'medium' | 'heavy';
/** Whether the range input is disabled */
disabled?: boolean;
/** Label for the range input */
label?: string;
/** Whether to show value labels */
showLabels?: boolean;
/** Whether to show tick marks */
showTicks?: boolean;
/** Number of tick marks to show */
tickCount?: number;
/** Custom tick marks */
ticks?: Array<{
value: number;
label?: string;
}>;
/** Whether to show tooltip on hover/drag */
showTooltip?: boolean;
/** Custom tooltip formatter */
tooltipFormatter?: (value: number) => string;
/** Orientation */
orientation?: 'horizontal' | 'vertical';
/** Custom class name */
className?: string;
/** Whether the range input is required */
required?: boolean;
/** Error message */
error?: string;
/** Whether the range input has an error */
hasError?: boolean;
/** Custom track color */
trackColor?: string;
/** Custom fill color */
fillColor?: string;
/** Custom thumb color */
thumbColor?: string;
}
/**
* RangeInput component with glassmorphic styling and dual-handle support
*/
export declare const RangeInput: React.ForwardRefExoticComponent<RangeInputProps & React.RefAttributes<HTMLDivElement>>;