Slider (Range) Question

[mikeamelin]

https://www.figma.com/design/jcuAUsN02n2yJerx39mqf9/LBR--%3E-Library-Preview?node-id=2650-4443

[JaneSjs]

User Inquiries

Slider

• T19601 - Slider options
• T17975 - Slider for 0 to 100 scale
• T17261 - Show value of range number
  for example having steps of 1 with min 0 and max 10 and then showing 1, 2, 3, 4 etc. above the range slider.
• T15028 - nouislider remove decimals
  Do not display decimal points for a selected option's tooltip.
• T13864 - SurveyJS customwidget noUislider event callback based css changes

I'm trying to implement dynamic CSS changes to sliders in SurveyJS based on certain events/thresholds, similar to this example using vanilla NoUISlider: https://jsfiddle.net/myriachi/ye94zuan/346/
In the NoUISlider example, the slider handle track change color when response start/ends ( can be customized in any other event callbacks).

• T12009 - Nouislider widget custom min max are not changing
  I have put the input box to fill in min and max values by the user

---

Range Selector

• T20168 - Nouislider with 2 sliders

[tsv2013]

User Inquiries

Slider

https://surveyjs.answerdesk.io/internal/ticket/details/T1463
https://surveyjs.answerdesk.io/internal/ticket/details/T1513
https://surveyjs.answerdesk.io/internal/ticket/details/T2240
https://surveyjs.answerdesk.io/internal/ticket/details/T4360
https://surveyjs.answerdesk.io/internal/ticket/details/T5515 -- vertical orientation
https://surveyjs.answerdesk.io/internal/ticket/details/T6128
https://surveyjs.answerdesk.io/internal/ticket/details/T6423
https://surveyjs.answerdesk.io/internal/ticket/details/T6686
https://surveyjs.answerdesk.io/internal/ticket/details/T8087 -- ticks editing in creator as collection of ValueItems
https://surveyjs.answerdesk.io/internal/ticket/details/T8920 -- matrix of sliders
https://surveyjs.answerdesk.io/internal/ticket/details/T8925 -- vertical orientation
https://surveyjs.answerdesk.io/internal/ticket/details/T12009
https://surveyjs.answerdesk.io/internal/ticket/details/T13026
https://surveyjs.answerdesk.io/internal/ticket/details/T13684
https://surveyjs.answerdesk.io/internal/ticket/details/T17261
https://surveyjs.answerdesk.io/internal/ticket/details/T17975
https://surveyjs.answerdesk.io/internal/ticket/details/T21464

Range Selector

https://surveyjs.answerdesk.io/internal/ticket/details/T2094
https://surveyjs.answerdesk.io/internal/ticket/details/T20168

[tsv2013]

Range Selector in Dashboards

surveyjs/survey-analytics#287

https://learn.microsoft.com/en-us/power-bi/create-reports/desktop-slicer-numeric-range

[ElenaGorbatkova]

1. sliderType - select between line (defaut) and range
2. enableStartValue - dispays default initial position
3. startPosition - accept numerical values for the initial position(s)
4. minValue - min value that can be selected
5. maxValue - max value that can be selected
6. stepValue - sets the value for each slider section
   or
   numberOfStatements/sections - set the number of slider sections within the given range
7. showExtremeValues - displays the min/max values
8. showSelectedValue - displays selected value
9. valueType - %,number,currency
10. decimal - 0, 0.1, etc.
11. allowNegativeValues

[tsv2013]

We decided to make a spike solution for a slider/range selector with the following features:

• Support for discrete and continuous scales (from 0 to 10 000 000), on a discrete scale the thumb should snap to the nearest discrete value
• Support for 1 (regular slider) and 2 (range slider) thumbs
• Scale ticks can be generated automatically or specified manually, in which case they should support custom labels
• Support for setting a step size or total tick count
• Min/max values should be set, can be hidden on the scale
• Ability to set min/max values dynamically using expressions
• Support for default values
• Support for indeterminate state (undefined value)
• Ability to specify the min/max length of a selected range
• Ability to hide scale labels
• Ability to display value in a thumb's tooltip
• Ability to display the tooltip permanently
• Support for value formatting in the tooltip and scale labels (%, currency, and so on)
• Some kind of mechanism of dealing with long custom labels on the scale

[dmitry-kurmanov]

Examples of implementation:

• many solutions from community
• Creating A Custom Range Input That Looks Consistent Across All Browsers
• example how to prevent min > max
• min > max (2) + full custom appearance
• full working example with a11y - https://stackoverflow.com/a/70561454/6623551
• https://mui.com/material-ui/react-slider/?srsltid=AfmBOooI27_eDA38MWfBzRUVhTE0Z-qw61xwheuzHwT_CABNAl33WtJV

full custom (drag-drop) - https://primereact.org/ bad ux

[SamMousa]

Great that you're working on this! This will finally allow us to drop noUISlider dependency.

[dmitry-kurmanov]

Great that you're working on this! This will finally allow us to drop noUISlider dependency.

yes, exactly!

[dmitry-kurmanov]

Known Issues:

• isDiscreteValueByStep mode shouldn't allow to break the step (fisrt, last, minRange, maxRange)
  
• case when default value breaks minRange/maxRange

[SamMousa]

Can we make sure not to have these boolean configuration options like isDiscreteValueByStep that have a lot of interdependencies, they always come back to haunt you later.
Why not have a mode that allows more values?