AlphaSlider

Slider component for selecting alpha channel in color pickers (0 – 1)

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/core

Usage

Use AlphaSlider component to allow users to select alpha (opacity) value of a color. It accepts values from 0 to 1. AlphaSlider is a part of ColorPicker component, but can also be used separately.

Alpha value: 0.55

import { useState } from 'react';
import { AlphaSlider, Text } from '@mantine/core';

function Demo() {
  const [value, onChange] = useState(0.55);

  return (
    <>
      <Text>Alpha value: {value}</Text>
      <AlphaSlider color="#1c7ed6" value={value} onChange={onChange} />
    </>
  );
}

Stack

AngleSlider