@chakra-ui/core#Slider JavaScript Examples

The following examples show how to use @chakra-ui/core#Slider. 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.js    From here-covid-19-tracker with MIT License 4 votes vote down vote up 
TimeSlider = ({ points }) => {
  const updateDate = useDataDate(state => state.updateDate)

  const uniqDays = useMemo(() => {
    const headers = points[0].properties.headers.split(";;")
    const allDates = headers
      .filter(d => {
        return d.includes("/" && ":" && "pm") || d.includes("/" && ":" && "am")
      })
      .sort((a, b) => {
        const date1 = new Date(a).getTime() 
        const date2 = new Date(b).getTime()
        return date1 - date2
      })

    const uniqDates = groupBy(allDates, o => {
      return dayjs(o).format("DD-MM-YYYY")
    })

    const uniqDays = Object.keys(uniqDates).map(d => {
      return uniqDates[d][uniqDates[d].length - 1]
    })

    return uniqDays
  }, [points])

  const [currentDate, setCurrentDate] = useState(uniqDays.length - 1)

  const [debouncedCurrentDate] = useDebounce(currentDate, 150)

  useEffect(() => {
    updateDate(uniqDays[debouncedCurrentDate])
  }, [debouncedCurrentDate, uniqDays, updateDate])

  return (
    <Box mt="2rem">

      <Heading fontSize="md" as="h3" mb="0.5rem">
        { "Timeline" }
      </Heading>

      <Flex mb="-0.75rem" zIndex={10} position="relative">
        <Badge display="inline-flex" alignItems="center" bg="#FBDFCF" color="#ec610e" fontSize="sm">
          <BlinkingDot />
            {
              currentDate === uniqDays.length - 1
                ? dayjs(points[0].properties["@ns:com:here:xyz"].updatedAt).format("DD MMM YYYY h:mm a")
                : dayjs(uniqDays[currentDate]).format("DD MMM YYYY") 
            }
        </Badge>
      </Flex>

      <TimeSeries points={points} dates={uniqDays} currentDate={currentDate} />

      <Box mr="2px">
        <Slider
          defaultValue={uniqDays.length - 1}
          min={0}
          max={uniqDays.length - 1}
          value={currentDate}
          onChange={val => setCurrentDate(val)}
        >
          <SliderTrack />
          <SliderFilledTrack bg="#ec610e" />
          <SliderThumb size="1.5rem" ml="-0.25rem">
            <Icon name="arrows" color="#ec610e" />
          </SliderThumb>
        </Slider>
      </Box>

      <Flex justifyContent="space-between">
        <Text fontSize="sm" color="gray.600" mt="-0.5rem">
          { dayjs(uniqDays[0]).format("DD MMM YYYY") }
        </Text>
        <Text fontSize="sm" color="gray.600" mt="-0.5rem">
          { dayjs(uniqDays[uniqDays.length - 1]).format("DD MMM YYYY") }
        </Text>
      </Flex>
    </Box>
  )
}