npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vanilla-rangeslider

v1.0.0

Published

Ion-RangeSlider without out jQuery

Downloads

1,641

Readme

Vanilla Javascript 💅

Description

  • Removed the jQuery requirement from the original ion.rangeSlider (Version: 2.3.1)
  • Removed IE8 Support (if this is a big deal, let me know)
  • Additional/Original skins can be found in the css here
  • For full documentation visit the original ion.rangeSlider as everything will work the same except the initializers (see the documentation below).

ion.rangeSlider

Dependencies

  • None 🤯

Usage

Add the following libraries to the page:

  • rangeSlider.min.js

Add the following stylesheets to the page:

  • rangeslider.min.css

Install with NPM

Use NPM to download latest version of a plugin and install it directly in to your project.

  • npm install vanilla-rangeslider

Initialisation

The slider overrides a native text input element.

<input type="text" id="example_id" name="example_name" value="" />

To initialise the slider, call ionRangeSlider on the element:

ionRangeSlider('#example_id');

Creating slider (all params)

An example of a customised slider:

ionRangeSlider('#example_id', {
    min: 0,
    max: 5000,
    prefix: "$",
    grid: true,
    grid_num: 5,
    step: 100,
});

You can also initialise slider with data-* attributes of input tag:

data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"

Public methods

To use public methods, at first you must save slider instance to variable:

// Store slider into a variable
const myRangeSlider = ionRangeSlider('#example_id', {
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});

// UPDATE - updates slider to any new values
myRangeSlider.update({
    from: 300,
    to: 400
});

// RESET - reset slider to it's inital values
myRangeSlider.reset();

// DESTROY - destroys slider and restores original input field
myRangeSlider.destroy();

Support Ion-series plugins development

☝️Support the originator

but think of me 🤵