-
-
Notifications
You must be signed in to change notification settings - Fork 106
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Change Value for Wheel #135
Comments
@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 })}
/>
</>
);
} |
jaywcjlove
added a commit
that referenced
this issue
Nov 28, 2023
@jaywcjlove I mean like ShadeSlider. Can I reuse it for Value? |
@spl1nt3r99 You can use it in combination, I don't understand what you need to do |
@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
added a commit
that referenced
this issue
Nov 29, 2023
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; |
@jaywcjlove Thank you! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is there any slider I can use to change v for hsva wheel?
The text was updated successfully, but these errors were encountered: