paveltyavin / multirangeslider

Slider for timetable and more

multirangeslider

[] (https://travis-ci.org/paveltyavin/multirangeslider)

Slider for multiple ranges.

The idea comes from Elessar project. Thank you, Matt!

Main documentation is here.

Install && Usage

npm install multirangeslider

multirangeslider exports as a CommonJS (Node) module, an AMD module, or a browser global:

var multirangeslider = require('multirangeslider');

require(['multirangeslider'], function(multirangeslider) { ... });

<script src="path/to/multirangeslider.js"></script>

Create an instance with var slider = new multirangeslider then add slider.el to the DOM somewhere.

var slider = new multirangeslider;
var yourElement = document.getElementById('your-element');
yourElement.appendChild(slider.el);

Documentation

See this page.

Licence

MIT

multirangeslider's Issues

Couple of questions

Hi thanks for creating this library, especial with elessar not being maintained anymore.

My questions are:

1. Is there a way to disable the ghost?
2. Is there a way to add individual read-only ranges that are fixed and read-only.

Looking forward to possible solutions.
Cheers,
Praney

Intersection error when adding a range after one has been removed

If I add a range (e.g. 10–20) then remove it and attempt to add a new range that would intersect, I get an error intersection, even though there shouldn't be any overlap because the original range was removed.

(By the way, this is a great project, sorry for raising a few bugs but I'm really keen to use this on a project of mine because it's exactly what I need :))

How can i add ranges on initializing the multirangeslider?

If I add the ranges after the init (with add) the onAdd- and onChange-event is triggered. This is a problem if i want to show the slider with pre-existing ranges and use the onAdd event if the user wants to add another range.

Thanks for checking this...

Start from anywhere with "Step" option

Hi, I want to start selecting every hours with "Step" option to 180(3hours), I've been looking for a way to do this, but I can't find any solution

My problem is if I have a 24-hour day For exemple I want to put slots of 3 hours, I can not choose when it start, its only 00:00 03:00 06:00 09:00 ... I would like to start selecting for example at 10:00 but impossible this way...

Maybe with "minWidth" but for resizing...?

Thanks

Support for Touch Events

Any timeline for providing touch events for mobile use?

Change doesn't get triggered when the mouse is released outside the slider.

Like the title says:

Change doesn't get triggered when the mouse is released outside the slider.

Any suggestions? :)

Update Slider fails while using display:none

We're using the slider to display intervals within a known duration. During the user's initiated update: The Slider values are removed using removeAll method and the new range values are added using .add() method.

The slider performs as expected with the old values removed and the new range value displayed while the control is visible. However, whenever the control is hidden using display:none and later revealed. The UI display shows all items within any width and left aligned.

Scenario One: showing the successful rendering prior to any update

Scenario Two: showing the un-successful rendering after revealing the hidden control post of the update (the update was performed while the control was display:none)

Scenario Three: shows the successful rendering while showing the control during the update

Is there any method or routine such that Scenario Two would become successful?

Doesn’t seem to draw correctly after calling add()

I have created a slider and tried to add a range with add([10, 20]. The range gets added but it's left position and width are both 0 until I start dragging, when it jumps to the right position.

var slider = new MultiRangeSlider({
    min: 0,
    max: 100,
    step: 1
});
document.body.appendChild(slider);
slider.add([10, 20]);

"added" event

Not sure if it's missing in the documentation or just doesn't exist but any chance there's an event we can hook into when a user adds a range?

Clicking a range fires the change event

Probably not a major issue but I noticed clicking a range fires both the click and change events, even if you haven't changed the range.

https://jsfiddle.net/jhxdvqkp/

How can I use the MultipleRangeSlider as an Angular Directive

Thanks for providing the project . Recently, I have had success using the jQuery Slider within Angular using the Directive, as such using a resource found here http://stackoverflow.com/questions/25550379/convert-jquery-ui-slider-widget-to-angularjs-directive
Do you have any implementation for AngularJs?

Cheers,

Do you have a got solution for model binding

i will write a ember-addon for the multirangeslider, as i already did for elessar.
see https://github.com/ejthan/ember-cli-elessar

Now i'm looking for a good solution for model binding, can you help me to find the beste solution for this?