Skip to content

feat(form): add slider widget #117

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(form): add slider widget #117

wants to merge 1 commit into from

Conversation

miguelgrc
Copy link
Collaborator

Closes #82 #113

  • Adds a slider field which can be of two different kinds:
    • Discrete: the user can provide a list of values and a list of labels
    • Continuous: the user can customize minimum and maximum values and step size, and a numeric input (which can be hidden) is displayed at the side
  • Allows suffixes (e.g. px, %), but just for visualization (only the plain numeric values will be stored)
  • Changed some numeric fields such as the code editor height or the modal width setting to use a slider, and added a new height setting to the rich editor also using a slider (addressing richEditor: make height customisable #113)
  • Removed the previous slider field that was used for the common field width setting and switched to this new one

pamfilos
pamfilos requested changes May 7, 2025
View reviewed changes
src/forms/widgets/base/RichEditorWidget.jsx
: "500px",
border: props.noBorder ? "none" : undefined,
height: height || undefined,
border: noBorder ? "none" : undefined,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not a react-formule prop (from legacy) - maybe we should pass it as uiOption = {border: '0 | 1px solid #000 | borderStyle' }

src/forms/widgets/base/SliderWidget.tsx
const { defaultValue, values, labels, minimum, maximum, step, kind } = schema;
const { suffix, hideInput } = options;

const isDiscrete = kind === "discrete";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kind should be part of the uiSchema/uiOptions, not the schema

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You think so? I put it in schema since it changes the behavior of the field, it's not just a cosmetic setting

src/forms/widgets/base/SliderWidget.tsx
options,
readonly,
}: SliderWidgetProps) => {
const { defaultValue, values, labels, minimum, maximum, step, kind } = schema;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

values labels might be better to be enum (schema) enumNames (uiSchema)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pamfilos pamfilos pamfilos requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

add a slider field
2 participants
@miguelgrc @pamfilos