ui.slider currently contains quite a bit of duplicated code. A few suggestions for refactorings:

drag and moveTo contain a lot of the same code, eg. this is in both:

if(o.stepping) {
	var value = this.convertValue(modifier);
	value = Math.round(value / o.stepping) * o.stepping;
	modifier = this.translateValue(value);	
}

if(this.rangeElement) {
	if(this.currentHandle[0] == this.handle[0] && modifier >= this.translateValue(this.value(1))) modifier = this.translateValue(this.value(1));
	if(this.currentHandle[0] == this.handle[1] && modifier <= this.translateValue(this.value(0))) modifier = this.translateValue(this.value(0));
}	

this.currentHandle.css(this.properties[0], modifier);
if(this.rangeElement) this.updateRange();

Should be extracted to a single method.

Both value() and handleSize() contain code to find a handle:

$(handle != undefined ? this.handle[handle] || handle : this.currentHandle)

That could be extracted as well.

createRange and updateRange contain the same code to update CSS. createRange could use updateRange to avoid the duplication.

Both could use a method that returns an object with the necessary CSS properties, passing the index as an argument, something like this:

cssproperties: function(index) {
	var result = {};
	result[this.properties[index]] = parseInt($(this.handle[index]).css(this.properties[index]),10) + this.handleSize(index)/2;
	return result;
},

Could then be used like this:

.css(this.cssproperties(0))
.css(this.cssproperties(1))

I've modified ui.slider.js because I want to set the sliders to initial values and/or change the slider values via javascript.

Init example: $('#example3').slider({ steps: 10, startValues:[0,40] });

I know this was a planned/todo function (or rather modify the moveTo function) but you may find this helpful.

Lines 86, 138-142, 295-326 contain my changes.

Thanks.

I need to define ranges for each handle, eg. handle one must be between 2 and 10, handle two between 5 and 100, where one must always be smaller then two. In other words: 2 < x <= 10, 5 < y <= 100, x < y.

Currently there is no way to restrict each handle.

Implementation notes:

There are several places where the restricition must be checked. Both the keydown and the click handler delegate to moveTo. So moveTo and drag, which handles the mouseinteraction, should check the range.

Specifying values could be done in the same fashion as for startValues (see #2053), eg.

$(...).slider({
  minValue: [2, 10],
  maxValue: [5, 100]
});

An alternative, grouping by handle:

$(...).slider({
  boundaries: [
    { min: 2, start: 5, max: 10 },
    { min: 10, start: 40, max: 100 }
  ]
});