Change Value for Wheel

[spl1nt3r99]

Is there any slider I can use to change v for hsva wheel?

[jaywcjlove]

@spl1nt3r99 Like this ?

import React, { useState } from 'react';
import Slider from '@uiw/react-color-slider';
import Wheel from '@uiw/react-color-wheel';

export default function Demo() {
  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
  return (
    <>
      <Slider
        color={hsva}
        style={{ paddingBottom: 10 }}
        onChange={(color) => {
          setHsva({ ...hsva, ...color.hsv });
        }}
      />
      <Wheel
        color={hsva}
        onChange={(color) => setHsva({ ...hsva, ...color.hsva })}
      />
    </>
  );
}

[spl1nt3r99]

@jaywcjlove I mean like ShadeSlider. Can I reuse it for Value?

[jaywcjlove]

@spl1nt3r99 You can use it in combination, I don't understand what you need to do

[spl1nt3r99]

@jaywcjlove For example, pre-default state of wheel is {h: 214, s: 43, v: 90, a: 1}. Any changes at wheel will modified only h and s properties. I want to add slider like this to change v property too.

[jaywcjlove]

@spl1nt3r99

[jaywcjlove]

import React, { useState, Fragment } from 'react';
import Wheel from '@uiw/react-color-wheel';
import ShadeSlider from '@uiw/react-color-shade-slider';
import { hsvaToHex } from '@uiw/color-convert';

function Demo() {
  const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
  return (
    <Fragment>
      <Wheel color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsva })} />
      <ShadeSlider
        hsva={hsva}
        style={{ width: 210, marginTop: 20 }}
        onChange={(newShade) => {
          setHsva({ ...hsva, ...newShade });
        }}
      />
      <div style={{ width: '100%', height: 34, marginTop: 20, background: hsvaToHex(hsva) }}></div>
    </Fragment>
  );
}

export default Demo;

[spl1nt3r99]

@jaywcjlove Thank you!