Closed armatrix closed 4 weeks ago
I think I fixed a similar issue a while ago. Can you share your code (just the slider part) for me to double check?
Controller form 'react hook form'
<Controller
name="leverage"
control={control}
defaultValue={"2"}
render={({ field: { onChange, value } }) => (
<>
<Slider
label="Leverage"
size="sm"
step={0.01}
maxValue={50}
minValue={2}
defaultValue={2}
className="pb-6"
marks={[
{
value: 2,
label: "2x",
},
{
value: 10,
label: "10x",
},
{
value: 20,
label: "20x",
},
{
value: 30,
label: "30x",
},
{
value: 40,
label: "40x",
},
{
value: 50,
label: "50x",
},
]}
classNames={{
base: "max-w-md",
label: "text-medium",
}}
renderValue={({ children, ...props }) => (
<output {...props}>
<Tooltip
className="text-tiny text-default-500 rounded-md"
content="Press Enter to confirm"
placement="left"
>
<Input
className="px-1 py-0.5 w-24 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
type="number"
value={value}
onChange={(e) => {
onChange(e.target.value)
onChangeLeverage(e.target.value)
}}
isInvalid={!!errors.leverage}
onBlur={() => trigger("leverage")}
onKeyDown={(
e: React.KeyboardEvent<HTMLInputElement>
) => {
if (e.key === "Enter" && !isNaN(Number(value))) {
onChange(value)
onChangeLeverage(value)
}
}}
endContent={<span>x</span>}
/>
</Tooltip>
</output>
)}
value={Number(value)}
onChange={(newValue) => {
setValue("leverage", newValue.toString())
onChangeLeverage(newValue.toString())
}}
/>
</>
)}
/>
@armatrix or can you verify using this canary version?
"@nextui-org/slider": "0.0.0-canary-20240504162810"
nope, not working, click 20x, the value is still not 20.
@armatrix or can you verify using this canary version?
"@nextui-org/slider": "0.0.0-canary-20240504162810"
![]()
ok will take a look
preliminary findings
onDownTrack
from react aria side
const [value, setValue] = React.useState<SliderValue>(25);
return (
Current volume: {value}
);
NextUI Version
v2.3.6
Describe the bug
can not get right value while slider marks clicked
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
set small steps for marks, while clicking mark value, slider value not been set right.
Expected behavior
I wanna catch the right value while clicking the 'mark', kindly check the video below
Screenshots or Videos
https://github.com/nextui-org/nextui/assets/62870322/eeac70fa-c6e4-46c5-80c2-50c6528f2001
Operating System Version
macos
Browser
Chrome