/solenya-slider

Solenya Slider Component

Primary LanguageTypeScriptMIT LicenseMIT

Solenya Slider

A custom slider for solenya that:

  • Optionally displays the current value
  • Optionally displays ticks or labeled ticks
  • Works consistently across all major browsers (including IE11) and mobile devices
  • Bypasses the inputRange control, to allow customisation without excessive browser-dependent css hacking
  • Internally leverages the interactjs library to ensure compatability with touch devices
  • Accessibility Support

Installation

npm solenya-slider

Playground / Demo

https://stackblitz.com/edit/solenya-slider

Usage

The usage of slider is as follows:

export class SliderTest extends Component
{
    rating = 70
    
    view() {
        return slider({
            target: this,
            prop: () => this.rating,
            min: 0,
            max: 100,
            style: {                  
                ticks: "ticks",
                thumbWidth: 50
            }
        })             
    }}

The visualisation of the current value can be a function of the underlying numeric value. For example:

            style: {                  
                ...
                currentLabel: n => n + "%"
            }

The style property has common styling properties for sliders. However, for low level control we can set the attributes for each part of the slider. For example, here we customize the border of the slider thumb:

        return slider({
            ....
            thumbAttrs: {
                boxShadow: "4px 4px 4px rgba(0, 0, 0, .2), 0 0 8px"
            }
        })

You can set the focused styling of the thumb and label with the thumbFocus or labelFocus properties. For example:

        return slider({
            ....
            style: {
                thumbFocus: {
                    backgroundColor: "hotpink"
                },
                labelFocus: {
                    color: "white"
                }
            }
        })

Future Improvements

Possible future improvements:

  • More extensibility
  • Vertical orientation
  • Select a range of values
  • Quick default styling for thumb (e.g. inline, outside, none)

The code is small, so copy the source code to customize yourself if necessary.