Tick slider not snapping to ticks if clicked

[RobQuistNL]

trafficstars

When dragging the tick slider works just fine, but when you click in between ticks, the value will be of that in between - its not snapping the way it is when you're dragging. And that is what I would think that should happen.

JSFiddle: http://jsfiddle.net/h3WDq/995/

[sirtimid]

+1

[knation]

+1

[jasonkonopacki]

I added the code below to the mouseup function, which forces it to try to snap to on any mouseup action. It's working well for me so far! The lines are this._setDataVal(this._snapToValue(val)); this._trigger('slideStop', this._snapToValue(val));

_mouseup: function _mouseup() {
                if (!this._state.enabled) {
                    return false;
                }
                if (this.touchCapable) {
                    // Touch: Unbind touch event handlers:
                    document.removeEventListener("touchmove", this.mousemove, false);
                    document.removeEventListener("touchend", this.mouseup, false);
                }
                // Unbind mouse event handlers:
                document.removeEventListener("mousemove", this.mousemove, false);
                document.removeEventListener("mouseup", this.mouseup, false);

                this._state.inDrag = false;
                if (this._state.over === false) {
                    this._hideTooltip();
                }
                var val = this._calculateValue(true);

                this._layout();
                this._setDataVal(this._snapToValue(val));
                this._trigger('slideStop', this._snapToValue(val));
                this._setTooltipPosition();

                return false;
            },

[rovolution]

we would definitely appreciate a PR for this!

[RobQuistNL]

I'll check this out soon(ish)

[jesshannon]

This problem is still occurring and the code above didn't help me. Here's a simple change event handler that snaps it up to the next highest. Relies on jQuery.

    $("#fundSize").slider({
        min: 1000,
        max: 100000000,
        scale: 'logarithmic',
        ticks: [1000, 10000, 100000, 1000000, 10000000, 100000000],
        ticks_labels: ["£1000", "£10,000", "£100,000", "£1,000,000", "£10,000,000", "£100,000,000"],
        ticks_snap_bounds: 100000000,
        step: 1000,
        tooltip: 'hide'
    }).on('change', function (e) {
        var slider = $(this);
        $.each($(this).data('slider').options.ticks, function (i,t) {
            if (e.value.newValue <= t) {
                slider.data('slider').setValue(t);
                return false;
            }
        });        
    });

[neslinesli93]

Thanks for the contribution @tshannon but it does not seem to work here :/ Here the main error: Uncaught TypeError: Cannot read property 'options' of undefined

[neslinesli93]

Ok the problem was on my side, i was just using bootstrapSlider instead of just slider, thanks again for the example!