feat(gui): add sliders to numeric inputs
This commit is contained in:
parent
d5c4040b07
commit
c5e0439aa5
|
@ -81,10 +81,10 @@ export function Img2Img(props: Img2ImgProps) {
|
|||
}} />
|
||||
<NumericField
|
||||
decimal
|
||||
label='Width'
|
||||
label='Weight'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
step={0.01}
|
||||
value={strength}
|
||||
onChange={(value) => {
|
||||
setStrength(value);
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { doesExist } from '@apextoaster/js-utils';
|
||||
import { TextField } from '@mui/material';
|
||||
import { Slider, Stack, TextField } from '@mui/material';
|
||||
import * as React from 'react';
|
||||
|
||||
export function parseNumber(num: string, decimal=false): number {
|
||||
export function parseNumber(num: string, decimal = false): number {
|
||||
if (decimal) {
|
||||
return parseFloat(num);
|
||||
} else {
|
||||
|
@ -15,24 +15,41 @@ export interface ImageControlProps {
|
|||
label: string;
|
||||
min: number;
|
||||
max: number;
|
||||
step: number | 'any';
|
||||
step: number;
|
||||
value: number;
|
||||
|
||||
onChange?: (value: number) => void;
|
||||
}
|
||||
|
||||
export function NumericField(props: ImageControlProps) {
|
||||
const { label, min, max, step, value } = props;
|
||||
return <TextField
|
||||
label={label}
|
||||
variant='outlined'
|
||||
type='number'
|
||||
inputProps={{ min, max, step }}
|
||||
value={value}
|
||||
onChange={(event) => {
|
||||
if (doesExist(props.onChange)) {
|
||||
props.onChange(parseNumber(event.target.value, props.decimal));
|
||||
}
|
||||
}}
|
||||
/>;
|
||||
const { decimal, label, min, max, step, value } = props;
|
||||
return <Stack spacing={2}>
|
||||
<TextField
|
||||
label={label}
|
||||
variant='outlined'
|
||||
type='number'
|
||||
inputProps={{ min, max, step }}
|
||||
value={value}
|
||||
onChange={(event) => {
|
||||
if (doesExist(props.onChange)) {
|
||||
props.onChange(parseNumber(event.target.value, decimal));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Slider
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
onChange={(_event, newValue) => {
|
||||
if (doesExist(props.onChange)) {
|
||||
if (Array.isArray(newValue)) {
|
||||
props.onChange(newValue[0]);
|
||||
} else {
|
||||
props.onChange(newValue);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Stack>;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue