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:
How can I get the slider markers to display above the slider track.