mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 05:32:02 +00:00
feat: add gradient-slider widget for FLOAT inputs (#8992)
## Summary Add a new 'gradient-slider' display mode for FLOAT widget inputs. Nodes can specify gradient_stops (color stop arrays) to render a colored gradient track behind the slider thumb, useful for color adjustment parameters like hue, saturation, brightness, etc. - GradientSlider.vue: reusable Reka UI-based gradient slider component - GradientSliderWidget.ts: litegraph canvas-mode fallback rendering - WidgetInputNumberGradientSlider.vue: Vue node widget integration - Schema, registry, and type updates for gradient-slider support this is prerequisite for color correct and balance BE changes https://github.com/Comfy-Org/ComfyUI/pull/12536 ## Screenshots (if applicable) <img width="610" height="237" alt="image" src="https://github.com/user-attachments/assets/b0577ca8-8576-4062-8f14-0a3612e56242" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8992-feat-add-gradient-slider-widget-for-FLOAT-inputs-30d6d73d36508199b3e8db6a0c213ab4) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -18,6 +18,7 @@ import { ColorWidget } from './ColorWidget'
|
||||
import { ComboWidget } from './ComboWidget'
|
||||
import { FileUploadWidget } from './FileUploadWidget'
|
||||
import { GalleriaWidget } from './GalleriaWidget'
|
||||
import { GradientSliderWidget } from './GradientSliderWidget'
|
||||
import { ImageCompareWidget } from './ImageCompareWidget'
|
||||
import { ImageCropWidget } from './ImageCropWidget'
|
||||
import { KnobWidget } from './KnobWidget'
|
||||
@@ -35,6 +36,7 @@ export type WidgetTypeMap = {
|
||||
button: ButtonWidget
|
||||
toggle: BooleanWidget
|
||||
slider: SliderWidget
|
||||
gradientslider: GradientSliderWidget
|
||||
knob: KnobWidget
|
||||
combo: ComboWidget
|
||||
number: NumberWidget
|
||||
@@ -92,6 +94,8 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
|
||||
return toClass(BooleanWidget, narrowedWidget, node)
|
||||
case 'slider':
|
||||
return toClass(SliderWidget, narrowedWidget, node)
|
||||
case 'gradientslider':
|
||||
return toClass(GradientSliderWidget, narrowedWidget, node)
|
||||
case 'knob':
|
||||
return toClass(KnobWidget, narrowedWidget, node)
|
||||
case 'combo':
|
||||
|
||||
Reference in New Issue
Block a user