AlphaSlider

Pick alpha (opacity) value for colors.

Import


import { AlphaSlider } from '@tidbcloud/uikit'

Usage

AlphaSlider is used to select the alpha (opacity) channel for colors. It is typically used alongside ColorPicker or HueSlider.


import { useState } from 'react'
import { AlphaSlider, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState(1)
 
  return (
    <>
      <Text mb="xs">Alpha value: {value}</Text>
      <AlphaSlider color="#1c7ed6" value={value} onChange={setValue} />
    </>
  )
}

With color

The color prop determines the color displayed in the gradient:


import { AlphaSlider, Stack } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Stack>
      <AlphaSlider color="#f00" />
      <AlphaSlider color="#0f0" />
      <AlphaSlider color="#00f" />
    </Stack>
  )
}

Props

Prop	Type	Default	Description
color	`string`	-	Color displayed in the alpha slider gradient
onChange	`(value: number) => void`	-	Called when value changes
onChangeEnd	`(value: number) => void`	-	Called when user stops dragging
size	`MantineSize`	`'md'`	Controls slider height
value	`number`	-	Current alpha value (0-1)