Display SliderMarkers above SliderTrack using chakra UI v1.8.8

43 Views Asked by At

By default in chakra UI, the SliderMarkers appear below the SliderTrack, I'd like to invert this. So

<Slider aria-label='slider-ex-6' onChange={(val) => setSliderValue(val)}>
      <SliderMark value={25} mt='1' ml='-2.5' fontSize='sm'>
        25%
      </SliderMark>
      <SliderMark value={50} mt='1' ml='-2.5' fontSize='sm'>
        50%
      </SliderMark>
      <SliderMark value={75} mt='1' ml='-2.5' fontSize='sm'>
        75%
      </SliderMark>
      <SliderMark
        value={sliderValue}
        textAlign='center'
        bg='blue.500'
        color='white'
        mt='-10'
        ml='-5'
        w='12'
      >
        {sliderValue}%
      </SliderMark>
      <SliderTrack>
        <SliderFilledTrack />
      </SliderTrack>
      <SliderThumb />
    </Slider>

results in:

enter image description here

How can I get the slider markers to display above the slider track.

0

There are 0 best solutions below