emberx-range-input
Advanced tools
A Slider component based on the native html5 range input.
The component itself takes on a number value between two bounds, that proceeds in discrete step values. So, for example, to indicate a percentage of saturation in an image, where the smallest change in saturation is 1%, you might specify your slider control like:
{{x-range-input min=0 max=100 step=1 value=saturationPercentage action=(action "updateSaturation")}}
In this example we would need to implement an updateSaturation action that
sets the value of saturationPercentage. That might look something like this:
actions: {
updateSaturation(value) {
this.set('saturationPercentage', value);
}
}
The action sends two arguments with it. The first is the value and the
second is the component itself as an optional argument.
While min, max, and step can take on any numeric values, the
default use-case is optimized for representing percentages stepped by
1%. There fore the proceeding example could have been written simply
as:
{{x-range-input value=saturationPercentage action=(action "updateSaturation")}}
mut helper{{x-range-input value=(mut saturationPercentage)}}
emberx-range-input is part of the "missing components of ember" collectively known as emberx:
ember install emberx-range-input
ember testember test --serverPlease note that this project is released with a Contributor Code of
Conduct. By participating in this project you agree to abide by its
terms, which can be found in the CODE_OF_CONDUCT.md file in this
repository.
FAQs
A range input component based on the native html5 range input
The npm package emberx-range-input receives a total of 17 weekly downloads. As such, emberx-range-input popularity was classified as not popular.
We found that emberx-range-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
Security News
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
Security News
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.