Jquery ui slider - attempt to disable individual pens

Question

I have a ui range slider. I modified the script to add additional ranges and descriptors. I am trying to disable one of the handles, (to show the part of the whole, which will always be part of the calculation, therefore it should not be volatile, but should be a visible segment).

I tried in the slide: if (ui.value == ui.values ​​[3] & ui.value> 98) {off ();

} if ( ui.value == ui.values[3] && ui.value < 98 ) { off(); } 

using both off () and return false, and the handle itself is then frozen, but it still calculates the values ​​as if they were moved.

So, I tried to disconnect - I tried: $('A.ui-slider-handle').eq(2).draggable(false); //this somehow lets me drag it all over the page $('A.ui-slider-handle').eq(2).draggable(false); //this somehow lets me drag it all over the page and

$('A.ui-slider-handle').eq(2).attr('disabled', 'disabled'); and $('A.ui-slider-handle').eq(2).prop('disabled');

but they don’t work either. Any suggestions? I am new to this and lost. Thanks!

Answer 1

As far as I can tell, the jQuery UI slider widget does not have the ability to disable individual descriptors. However, if you don't mind expanding the jQuery UI slider widget, you can add this functionality.

In the code below, I extended the _mouseCapture function in the jQuery UI slider widget to prevent mouse movement / selection of descriptors that have the ui-slider-handle-disabled class. It is a bit big since I had to copy the existing _mouseCapture function and add a few lines. I marked my insertions with comments.

You can check this code here on jsfiddle .

 // extend jQuery UI slider widget _mouseCapture function to allow disabling handles // _mouseCapture function copied from jQuery UI v1.10.3 $.widget("ui.slider", $.ui.slider, { _mouseCapture: function (event) { var position, normValue, distance, closestHandle, index, allowed, offset, mouseOverHandle, that = this, o = this.options; if (o.disabled) { return false; } this.elementSize = { width: this.element.outerWidth(), height: this.element.outerHeight() }; this.elementOffset = this.element.offset(); position = { x: event.pageX, y: event.pageY }; normValue = this._normValueFromMouse(position); distance = this._valueMax() - this._valueMin() + 1; this.handles.each(function (i) { // Added condition to skip closestHandle test if this handle is disabled. // This prevents disabled handles from being moved or selected with the mouse. if (!$(this).hasClass("ui-slider-handle-disabled")) { var thisDistance = Math.abs(normValue - that.values(i)); if ((distance > thisDistance) || (distance === thisDistance && (i === that._lastChangedValue || that.values(i) === o.min))) { distance = thisDistance; closestHandle = $(this); index = i; } } }); // Added check to exit gracefully if, for some reason, all handles are disabled if(typeof closestHandle === 'undefined') return false; allowed = this._start(event, index); if (allowed === false) { return false; } this._mouseSliding = true; this._handleIndex = index; closestHandle.addClass("ui-state-active") .focus(); offset = closestHandle.offset(); // Added extra condition to check if the handle currently under the mouse cursor is disabled. // This ensures that if a disabled handle is clicked, the nearest handle will remain under the mouse cursor while dragged. mouseOverHandle = !$(event.target).parents().addBack().is(".ui-slider-handle") || $(event.target).parents().addBack().is(".ui-slider-handle-disabled"); this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : { left: event.pageX - offset.left - (closestHandle.width() / 2), top: event.pageY - offset.top - (closestHandle.height() / 2) - (parseInt(closestHandle.css("borderTopWidth"), 10) || 0) - (parseInt(closestHandle.css("borderBottomWidth"), 10) || 0) + (parseInt(closestHandle.css("marginTop"), 10) || 0) }; if (!this.handles.hasClass("ui-state-hover")) { this._slide(event, index, normValue); } this._animateOff = true; return true; } }); 

Answer 2

Define the descriptors yourself in the div slider:

 <div id="slider-range"> <div class="ui-slider-handle first-handle"></div> <div class="ui-slider-handle second-handle"></div> </div> 

Disable all interactions with the slider:

 .ui-widget { pointer-events: none; } 

And set the appropriate css style to enable interaction:

 #slider-range.ui-slider .ui-slider-handle.first-handle { pointer-events: all; } 

All but the first descriptor are now disabled

Answer 3

I succeeded:

  $ ('.ui-slider .ui-slider-handle:first').draggable( false);