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:
Terry Jia
2026-02-20 20:51:10 -05:00
committed by GitHub
parent 4103379901
commit f7a83f6dfa
14 changed files with 590 additions and 24 deletions

View File

@@ -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':