InputSlider 1.0

This class will replace an input element with a visual slider. The actual value of the input will display and can be colored based on its range if desired. The default colorization is red for 0 and blue for 100 and can be overridden for your own function.



Details

Author
Jon Baker
Current version
1.0
GitHub
jdavidbakr/InputSlider
Downloads
2970
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • More/Slider
    • More/Color
    • More/Number.Format
    • Core/JSON

How to use

Pass the input element to the class and it will take care of the rest.

You must add a json string to the "rel" tag with the following keys:

  • currency: Optional - If this exists, the text will display as currency
  • percent: Optional - If this exists, the text will display as a percent
  • range: Required - This should contain an array for the range (minimum/maximum)
  • default_value: Optional - What the default value should be for the input element if there is no value tag already
  • value_class: Required - The class to apply to the value element
  • colorize100: Optional - If this exists, the value element will have a color applied based on its value
  • snap: Optional - What value to snap to

Options

  • slider_class: The class to apply to the Slider
  • slider_knob_class: The class to apply to the knob of the slider
  • slider_snap_class: The class to apply to the "snap" indicator
  • slider_snap_width: The width of the slider snap item (defaults to 1)
  • slider_snap_threshold: The threshold for the snap to activate
  • currency_format_options: If the input element is currency, this is the format for the numeric value
  • percent_format_options: If the input element is a percent, this is the format for the numeric value

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus