@chakra-ui/react#SliderTrack TypeScript Examples

The following examples show how to use @chakra-ui/react#SliderTrack. 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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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'} &gt;
        </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)}
                    >
                        &lt; 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 vote down vote up
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>
    )
}