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 33 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.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.