HueSlider

Slider component for selecting hue channel in color pickers (0 – 360 degrees)

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/core

Usage

Use HueSlider component to allow users to select hue value of a color. It accepts values from 0 to 360. HueSlider is a part of ColorPicker component, but can also be used separately.

Hue value: 250

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

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

  return (
    <>
      <Text>Hue value: {value}</Text>
      <HueSlider value={value} onChange={onChange} />
    </>
  );
}

FileInput

Input