@chakra-ui/react#SliderFilledTrack TypeScript Examples
The following examples show how to use
@chakra-ui/react#SliderFilledTrack.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From formik-chakra-ui with MIT License | 6 votes |
|
SliderControl: FC<SliderControlProps> = (
props: SliderControlProps
) => {
const {
name,
label,
sliderProps,
sliderTrackProps,
sliderThumbProps,
...rest
} = props;
const [field, , { setValue }] = useField(name);
function handleChange(value: number) {
setValue(value);
}
// Does not behave like expected, so we manually handle it.
function handleBlur(e: React.FocusEvent<HTMLDivElement>) {
(e.target as any).name = name;
field.onBlur(e);
}
return (
<FormControl name={name} label={label} {...rest}>
<Slider
{...field}
id={name}
onChange={handleChange}
onBlur={handleBlur}
{...sliderProps}
>
<SliderTrack {...sliderTrackProps}>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb {...sliderThumbProps} />
</Slider>
</FormControl>
);
}
Example #2
| Source File: ProgressPanel.tsx From openchakra with MIT License | 6 votes |
|
ProgressPanel = () => {
const { setValue } = useForm()
const value = usePropsSelector('value')
const size = usePropsSelector('size')
return (
<>
<FormControl label="Value">
<Slider
onChange={value => setValue('value', value)}
min={0}
max={100}
step={1}
defaultValue={value}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<SwitchControl label="Has stripe" name="hasStripe" />
<SwitchControl label="Is animated" name="isAnimated" />
<ColorsControl label="Color Scheme" name="colorScheme" />
<SizeControl label="Size" options={['sm', 'md', 'lg']} value={size} />
</>
)
}
Example #3
| Source File: EffectsPanel.tsx From openchakra with MIT License | 6 votes |
|
EffectsPanel = () => {
const { setValue } = useForm()
const opacity = usePropsSelector('opacity')
const normalizedOpacity = useMemo(() => {
return opacity * 100 || 100
}, [opacity])
return (
<>
<FormControl label="Opacity">
<Slider
min={1}
onChange={(value: any) => setValue('opacity', value / 100)}
value={normalizedOpacity}
mr={2}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<TextControl name="boxShadow" label="Box Shadow" />
</>
)
}
Example #4
| Source File: SliderWithLabel.tsx From rari-dApp with GNU Affero General Public License v3.0 | 5 votes |
|
SliderWithLabel = ({
value,
setValue,
formatValue,
min,
max,
step,
isDisabled,
...others
}: {
min?: number;
max?: number;
step?: number;
value: number;
isDisabled?: boolean;
setValue: (value: number) => any;
formatValue?: (value: number) => string;
[key: string]: any;
}) => {
return (
<Row mainAxisAlignment="flex-start" crossAxisAlignment="center" {...others}>
<Text fontWeight="bold" mr={2}>
{formatValue ? formatValue(value) : value}
</Text>
<Slider
width="190px"
colorScheme="white"
onChange={setValue}
value={value}
min={min ?? 0}
max={max ?? 100}
step={step ?? 1}
isDisabled={isDisabled}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</Row>
);
}
Example #5
| Source File: Position.tsx From dope-monorepo with GNU General Public License v3.0 | 5 votes |
|
Position = (props: {object: any}) => {
const [x, setX] = useState(props.object.x);
const [y, setY] = useState(props.object.y);
useEffect(() => {
if (x)
props.object.x = x;
if (y)
props.object.y = y;
}, [x, y]);
return (
// <VStack>
<div>
Position XY
<Flex>
<NumberInput maxW='100px' mr='2rem' value={x} onChange={(s, n) => setX(n)}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<Slider
flex='1'
focusThumbOnChange={false}
value={x}
onChange={(n) => setX(n)}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb fontSize='sm' boxSize='32px' children={Math.round(x)} />
</Slider>
</Flex>
<Flex>
<NumberInput maxW='100px' mr='2rem' value={y} onChange={(s, n) => setY(n)}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<Slider
flex='1'
focusThumbOnChange={false}
value={y}
onChange={(n) => setY(n)}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb fontSize='sm' boxSize='32px' children={Math.round(y)} />
</Slider>
</Flex>
</div>
// </VStack>
)
}
Example #6
| Source File: IconCustomizerDrawer.tsx From lucide with ISC License | 5 votes |
|
export function IconCustomizerDrawer() {
const [showCustomize, setShowCustomize] = useState(false);
const { color, setColor, size, setSize, strokeWidth, setStroke, resetStyle } = useContext(IconStyleContext);
return (
<>
<Button as="a" leftIcon={<Edit />} size="lg" onClick={() => setShowCustomize(true)}>
Customize
</Button>
<Drawer isOpen={showCustomize} placement="right" onClose={() => setShowCustomize(false)}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Customize Icons</DrawerHeader>
<DrawerBody>
<Grid gridGap={'1em'}>
<FormControl>
<ColorPicker
color={color}
value={color}
onChangeComplete={(col) => setColor(col.hex)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="stroke">
<Flex>
<Text flexGrow={1} fontWeight={'bold'}>
Stroke
</Text>
<Text>{strokeWidth}px</Text>
</Flex>
</FormLabel>
<Slider
value={strokeWidth}
onChange={setStroke}
min={0.5}
max={3}
step={0.5}
name={'stroke'}
>
<SliderTrack>
<SliderFilledTrack bg={color} />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<FormControl>
<FormLabel htmlFor="size">
<Flex>
<Text flexGrow={1} fontWeight={'bold'}>
Size
</Text>
<Text>{size}px</Text>
</Flex>
</FormLabel>
<Slider value={size} onChange={setSize} min={12} max={64} step={1} name={'size'}>
<SliderTrack>
<SliderFilledTrack bg={color} />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<FormControl>
<Button onClick={resetStyle}>Reset</Button>
</FormControl>
</Grid>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
);
}
Example #7
| Source File: HuesPickerControl.tsx From openchakra with MIT License | 5 votes |
|
HuesPickerControl = (props: HuesPickerPropType) => {
const [hue, setHue] = useState(500)
return (
<>
<Grid mb={2} templateColumns="repeat(5, 1fr)" gap={0}>
{Object.keys(props.themeColors).map(colorName =>
props.gradient ? (
<Box
border={colorName.includes('white') ? '1px solid lightgrey' : ''}
key={colorName}
_hover={{ boxShadow: 'lg' }}
cursor="pointer"
bg={`${colorName}.${props.enableHues ? hue : 500}`}
onClick={() => {
if (props.updateGradient) {
props.updateGradient(`${colorName}.${hue}`, props.index!)
}
}}
mt={2}
borderRadius="full"
height="30px"
width="30px"
/>
) : (
<Box
border={colorName.includes('white') ? '1px solid lightgrey' : ''}
key={colorName}
_hover={{ boxShadow: 'lg' }}
cursor="pointer"
bg={`${colorName}.${props.enableHues ? hue : 500}`}
onClick={() =>
props.setValue(
props.name,
props.enableHues ? `${colorName}.${hue}` : colorName,
)
}
mt={2}
borderRadius="full"
height="30px"
width="30px"
/>
),
)}
</Grid>
{props.enableHues && (
<>
<Slider
onChange={value => {
value = value === 0 ? 50 : value
setHue(value)
}}
min={0}
max={900}
step={100}
value={hue}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb boxSize={8}>
<Box borderRadius="full" fontSize="xs">
{hue}
</Box>
</SliderThumb>
</Slider>
</>
)}
</>
)
}
Example #8
| Source File: AvatarGroupPanel.tsx From openchakra with MIT License | 5 votes |
|
AvatarGroupPanel = () => {
const { setValue, setValueFromEvent } = useForm()
const size = usePropsSelector('size')
const spacing = usePropsSelector('spacing')
const max = usePropsSelector('max')
return (
<>
<FormControl label="Size" htmlFor="size">
<Select
name="size"
id="size"
size="sm"
value={size || ''}
onChange={setValueFromEvent}
>
<option>2xs</option>
<option>xs</option>
<option>sm</option>
<option>md</option>
<option>lg</option>
<option>xl</option>
<option>2xl</option>
</Select>
</FormControl>
<FormControl label="Spacing">
<Slider
onChange={value => setValue('spacing', value)}
min={-3}
max={6}
step={1}
defaultValue={spacing}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<FormControl label="max">
<NumberInput
size="sm"
onChange={value => setValue('max', value)}
value={max}
min={1}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</FormControl>
</>
)
}
Example #9
| Source File: CircularProgressPanel.tsx From openchakra with MIT License | 5 votes |
|
CircularProgressPanel = () => {
const { setValue } = useForm()
const value = usePropsSelector('value')
const thickness = usePropsSelector('thickness')
return (
<>
<FormControl label="Value">
<Slider
onChange={value => setValue('value', value)}
min={0}
max={100}
step={1}
value={value || 100}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<TextControl name="size" label="Size" />
<FormControl label="Thickness">
<Slider
onChange={value => setValue('thickness', value)}
min={0.1}
max={1}
step={0.1}
defaultValue={thickness}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
</Slider>
</FormControl>
<ColorsControl label="Color" name="color" enableHues />
<SwitchControl label="Loading" name="isIndeterminate" />
</>
)
}
Example #10
| Source File: WalkthroughLayout.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
WalkthroughLayout = ({...rest}): JSX.Element => {
const [step, setStep] = useState(0);
const [completedSteps, setCompletedSteps] = useState([] as Array<number>);
const proxyService: string = useAppSelector(state => state.config.proxy_service ?? '');
const password: string = useAppSelector(state => state.config.password ?? '');
const bgColor = useBackground();
// Links walkthrough steps and the values they rely on to be completed
const steps: Array<StepItem> = [
{
component: IntroWalkthrough,
dependencies: []
},
{
component: PermissionsWalkthrough,
dependencies: []
},
{
component: NotificationsWalkthrough,
dependencies: []
},
{
component: ConnectionWalkthrough,
dependencies: [proxyService, password]
},
{
component: PrivateApiWalkthrough,
dependencies: []
},
{
component: ConfigurationsWalkthrough,
dependencies: []
}
];
const CurrentStep = steps[step].component;
const requiresDependencies = steps[step].dependencies.filter(e => e.length > 0).length !== steps[step].dependencies.length;
const showNext = step < steps.length && !requiresDependencies;
const showPrevious = step > 0;
// Make sure we start at the top
useEffect(() => {
window.scrollTo(0, 0);
}, []);
const nextButton = (
<Button
disabled={!showNext}
mt='20px'
colorScheme='blue'
onClick={() => {
if (step === steps.length - 1) {
toggleTutorialCompleted(true);
} else {
setStep(step + 1);
}
}}
>
{step === steps.length - 1 ? 'Finish' : 'Next'} >
</Button>
);
return (
<Box p={3} {...rest}>
<Box mb='80px'>
<CurrentStep onComplete={() => {
setCompletedSteps([...completedSteps, step]);
}}/>
</Box>
<Box position='fixed' bottom={0} left={0} width='100%' height='80px' bg={bgColor}>
<Divider />
<Flex justifyContent='space-between' alignItems='center' mx={5}>
<Button
disabled={!showPrevious}
mt='20px'
onClick={() => setStep(step - 1)}
>
< Back
</Button>
<Stack width='70%'>
<Slider aria-label='slider-ex-6' isReadOnly={true} value={step * 20}>
<SliderMark value={0} mt='3' ml='-3.5' fontSize='sm'>
Intro
</SliderMark>
<SliderMark value={20} mt='3' ml='-9' fontSize='sm'>
Permissions
</SliderMark>
<SliderMark value={40} mt='3' ml='-10' fontSize='sm'>
Notifications
</SliderMark>
<SliderMark value={60} mt='3' ml='-9' fontSize='sm'>
Connection
</SliderMark>
<SliderMark value={80} mt='3' ml='-9' fontSize='sm'>
Private API
</SliderMark>
<SliderMark value={100} mt='3' ml='-5' fontSize='sm'>
Finish
</SliderMark>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</Stack>
{/* Step 3 is the connection step */}
{(step === 3 && password.length === 0) ? (
<Popover autoFocus={false} defaultIsOpen={true}>
<PopoverTrigger>
{nextButton}
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Requirements</PopoverHeader>
<PopoverBody>
<Text>Enter a password and save it (using the floppy disk button) to proceed</Text>
</PopoverBody>
</PopoverContent>
</Popover>
) : nextButton}
</Flex>
</Box>
</Box>
);
}
Example #11
| Source File: Music.tsx From dope-monorepo with GNU General Public License v3.0 | 4 votes |
|
Music = (props: {
musicManager: MusicManager
}) => {
const [, forceUpdate] = React.useReducer((i) => i + 1, 0);
const [ songProgress, setSongProgress ] = React.useState(props.musicManager.currentSong?.song.seek);
React.useEffect(() => {
let intervalId: NodeJS.Timer;
if (props.musicManager.currentSong)
intervalId = setInterval(() => {
setSongProgress(props.musicManager.currentSong!.song.seek);
});
return () => {
clearInterval(intervalId);
}
}, []);
console.log(props.musicManager.soundManager.volume);
return (
<div>
<HStack style={{
alignItems: "stretch",
marginBlock: "1rem",
}}>
{
props.musicManager.currentSong &&
<Container style={{
padding: "0.5rem",
minWidth: "60%",
borderRadius: "7px",
backgroundColor: "rgba(255,255,255,0.5)",
}}>
<HStack>
<div style={{
width: "70%"
}}>
<div>
<Text fontWeight="bold" paddingBottom="0px">
Currently playing
</Text>
<Text paddingBottom="0px">
{props.musicManager.currentSong.name}
</Text>
<Slider
value={songProgress}
onChange={(v) => {
props.musicManager.currentSong?.song.setSeek(v);
}}
max={props.musicManager.currentSong!.song.duration}
width="100%"
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb style={{
boxShadow: "none"
}} />
</Slider>
</div>
{
props.musicManager.upcomingSong && <div>
<Text fontWeight="bold" paddingBottom="0px">
Upcoming
</Text>
<Text>
{props.musicManager.upcomingSong.name}
</Text>
</div>
}
</div>
<Spacer />
<VStack>
{
<Button variant="primary" onClick={() => {
props.musicManager.currentSong!.song.isPaused ?
props.musicManager.currentSong!.song.resume() :
props.musicManager.currentSong!.song.pause();
forceUpdate();
}}>
{
props.musicManager.currentSong.song.isPaused ? "Resume" : "Pause"
}
</Button>
}
<Button variant="primary" onClick={() => {
props.musicManager.shuffle(undefined, undefined, false);
forceUpdate();
}}>
Skip
</Button>
</VStack>
</HStack>
</Container>
}
<Container style={{
padding: "0.5rem",
borderRadius: "7px",
minHeight: "100%",
backgroundColor: "rgba(255,255,255,0.5)",
}}>
<div>
<div>
<Text fontWeight="bold" paddingBottom="0px">
Volume
</Text>
<Slider
defaultValue={props.musicManager.soundManager.volume * 100}
onChange={(v) => props.musicManager.soundManager.setVolume(v / 100)}
width="70%"
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</div>
<div>
<Text fontWeight="bold" paddingBottom="0px">
Rate
</Text>
<Slider
defaultValue={props.musicManager.soundManager.rate * 100}
onChange={(v) => props.musicManager.soundManager.setRate(v / 100)}
width="70%"
max={200}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</div>
<div>
<Text fontWeight="bold" paddingBottom="0px">
Detune
</Text>
<Slider
defaultValue={props.musicManager.soundManager.detune}
onChange={(v) => props.musicManager.soundManager.setDetune(v)}
width="70%"
max={1200}
min={-1200}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</div>
</div>
</Container>
</HStack>
<SimpleGrid columns={2} spacing={5} paddingBottom="2">
{
props.musicManager.songs.map((song, i) =>
<SongComponent key={i} song={song} musicManager={props.musicManager} updateState={forceUpdate} />)
}
</SimpleGrid>
</div>
)
}
