SRangeComponent

Platform  

html

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

  Features

• All the built-in input type range features are supported

• Can display a tooltip on top of the thumb to help user know what's the current value

• Can have target(s) that will be automatically filled with the current value

• Support for sugar theming system when activate default style

  Import

  Install

  Interface

1. name

   String

   Specify the name to assign to the internal input[type="range"]

2. value

   Number

   Specify the initial range value

3. values

   Object

   Specify some values in array like ["hello","world"] that will be used for tooltip. Your range steps MUST be integers for this to work properly

4. min

   0

   Number

   Specify the minimal value or the range

5. max

   100

   Number

   Specify the maximal value of the range

6. step

   Number

   Specify the steps between each values

7. target

   String

   Specify a css selector of any HTMLElement or HTMLInputElement in which to inject the value when the range is updated

8. tooltip

   false

   Boolean

   Specify if you want to display the value inside a tooltip on top of the thumb

9. disabled

   false

   Boolean

   Specify if this range is disabled

  Related resource(s)

GitHub - darlanrod/input-range-scss: Styling Cross-Browser Compatible Range Inputs with Sass

Styling Cross-Browser Compatible Range Inputs with Sass - GitHub - darlanrod/input-range-scss: Styling Cross-Browser Compatible Range Inputs with Sass

Check out more...