feat: enhance slider component with labels and improved input handling (#5065)

* 📝 (openai.py): Update temperature slider range from 0-1 to 0-2 with step 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

* 📝 (sliderComponent/index.tsx): improve styling and structure of the SliderComponent by refactoring the display value element to use a div container with appropriate classes and styles.

* 📝 (App.css): Add styles to hide spin buttons in input[type=number] elements for better UX
🔧 (sliderComponent/index.tsx): Add input element to allow users to directly edit the slider value for improved user experience

* ✨ (slider-labels.tsx): Add SliderLabels component to display min and 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

* 📝 (applies.css): update hover:ring value to use variable hover:ring-slider-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

* ✨ (build-color-by-name.ts): add function to dynamically build color based 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

src/backend/base/langflow/components/models/openai.py

@@ -70,7 +70,9 @@ class OpenAIModelComponent(LCModelComponent):
             advanced=False,
             value="OPENAI_API_KEY",
         ),
-        SliderInput(name="temperature", display_name="Temperature", value=0.1, range_spec=RangeSpec(min=0, max=1)),
+        SliderInput(
+            name="temperature", display_name="Temperature", value=0.1, range_spec=RangeSpec(min=0, max=2, step=0.01)
+        ),
         IntInput(
             name="seed",
             display_name="Seed",