Feature Request: Range filter: 2-handle slider instead of two number inputs?

tacman1123

We're using ColumnControl with the numberRange content type for numeric columns (height, horsepower, torque, etc.) and it works well. The two-input min/max pattern is
functional, but a dual-handle range slider would be a much better UX for these kinds of bounded numeric filters.

A few questions:

1. Is there a built-in slider content type planned for ColumnControl?

   Something like { extend: "rangeSlider" } that renders a two-handle slider and fires the same dt.draw() on change would be ideal. The value output could map directly to the
   existing field[gte]/field[lte] API params we're already using.

2. Is the numberRange content type extensible enough to swap in a library like noUiSlider?

   Looking at the custom content type API, it seems like it should be possible to replace the init function:

   DataTable.ColumnControl.content.rangeSlider = {
   defaults: { columnName: null, min: 0, max: 100 },
   init(config) {
   const el = document.createElement('div');
   // noUiSlider.create(el, { ... })
   // on update → dt.draw()
   return el;
   }
   };

   Has anyone done this integration? Any gotchas with how ColumnControl reads values back from a custom content type after draw() is called?

3. Context: DataTables 3.0 beta + ColumnControl 2.0 beta

   We're running datatables.net-bs5 3.0.0-beta.2 and datatables.net-columncontrol-bs5 2.0.0-beta.1 with Bootstrap 5 / Symfony UX. Loving the beta — the new layout API and
   ColumnControl are a big step up. I'll put the repo up for a live demo shortly.

tacman1123

Live: https://meili.survos.com/admin/browse/app_car

Added a group: property to the PHP entity.

    #[Field(filterable: true, sortable: true, widget: Widget::Range, width: '5rem', group: 'Dimensions')]
    #[Column(type: Types::INTEGER, nullable: true)]
    public ?int $dimensionsHeight = null;

    /** @original Dimensions.Length  @stats distinct=208 */
    #[Field(filterable: true, sortable: true, widget: Widget::Range, width: '5rem', group: 'Dimensions')]
    #[Column(type: Types::INTEGER, nullable: true)]
    public ?int $dimensionsLength = null;

    /** @original Dimensions.Width  @stats distinct=138 */
    #[Field(filterable: true, sortable: true, widget: Widget::Range, width: '5rem', group: 'Dimensions')]
    #[Column(type: Types::INTEGER, nullable: true)]
    public ?int $dimensionsWidth = null;

allan

Loving the beta

Awesome! That is a very nice table in your link. Thank you for sharing it.

1) Is there a built-in slider content type planned for ColumnControl?

Not at this time, as that's the first request I can recall for it . It is a nice idea though - I've added it to the list.

2) Is the numberRange content type extensible enough to swap in a library like noUiSlider?

Not really. The intention with ColumnControl was for the "content types" to be easily added, but not for each one to be modified. The idea was that if you needed a different UI you would add a new content type specifically for that UI.

Allan