feat: enhance slider component with labels and improved input handling #5065
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…tep 0.01 for more precise control 📝 (sliderComponent/index.tsx): Update step value for slider component from 0.1 to 0.01 for smoother and more accurate adjustments 📝 (sliderComponent/index.tsx): Update MAX_LABEL from "Wild" to "Creative" for better semantic representation 📝 (sliderComponent/index.tsx): Add cursor-grabbing style when slider thumb is being grabbed to improve user experience
…liderComponent by refactoring the display value element to use a div container with appropriate classes and styles.
…ements for better UX 🔧 (sliderComponent/index.tsx): Add input element to allow users to directly edit the slider value for improved user experience
…max labels with icons in SliderComponent for better user experience 📝 (index.tsx): Remove sliderInput prop and refactor SliderComponent to improve code readability and maintainability 🔧 (applies.css): Add styling for input-slider-text class to improve consistency in SliderComponent styling
dosubot
bot
added
size:L
anovazzi1
requested changes
Dec 4, 2024
github-actions
bot
added
enhancement
…lider-input-border for consistency and maintainability 📝 (index.css): add variable --slider-input-border to define the color value for slider input border 🔧 (tailwind.config.mjs): add slider-input-border custom property to map to the defined color value in the CSS variables
…ased on input values to customize UI ✨ (get-min-max-value.ts): add function to get minimum or maximum value based on input constraints 🔧 (index.tsx): update import path for getMinOrMaxValue function 🔧 (index.tsx): add buildColorByName function to dynamically set thumb color based on percentage 🔧 (index.tsx): add logic to dynamically set background color gradient based on thumb color and percentage 🔧 (index.tsx): add logic to dynamically set thumb background color based on percentage and color calculation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request includes several changes to the frontend and backend components to enhance the functionality and user experience of the slider component.
Frontend Changes:
Slider Component Enhancements:
SliderLabelscomponent to display min and max labels with icons for the slider. (src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/components/slider-labels.tsx, src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/components/slider-labels.tsxR1-R46)src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx, src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsxR136-R202)src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx, [1] [2]CSS Adjustments:
src/frontend/src/App.css, [1];src/frontend/src/style/applies.css, [2]Backend Changes:
temperatureslider input range specification to allow values between 0 and 2 with a step of 0.01. (src/backend/base/langflow/components/models/openai.py, src/backend/base/langflow/components/models/openai.pyL73-R75)