Slider: Add demo for custom handle

Fixes #15023 Closes gh-1740
jquery · Sep 13, 2016 · 51461d523868c168f2e12eeb547c1cf8b7cf59cf · 51461d5 · sameer05k21a0440 · Jan 24, 2018
1 parent 57bff49
commit 51461d523868c168f2e12eeb547c1cf8b7cf59cf
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 3 deletions.
diff --git a/demos/slider/custom-handle.html b/demos/slider/custom-handle.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Slider - Custom handle</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#custom-handle {
+		width: 3em;
+		height: 1.6em;
+		top: 50%;
+		margin-top: -.8em;
+		text-align: center;
+		line-height: 1.6em;
+	}
+	</style>
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../bootstrap.js">
+		var handle = $( "#custom-handle" );
+		$( "#slider" ).slider({
+			create: function() {
+				handle.text( $( this ).slider( "value" ) );
+			},
+			slide: function( event, ui ) {
+				handle.text( ui.value );
+			}
+		});
+	</script>
+</head>
+<body>
+
+<div id="slider">
+	<div id="custom-handle" class="ui-slider-handle"></div>
+</div>
+
+<div class="demo-description">
+<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
+</div>
+</body>
+</html>
diff --git a/demos/slider/index.html b/demos/slider/index.html
@@ -18,6 +18,7 @@
 	<li><a href="range-vertical.html">Vertical range slider</a></li>
 	<li><a href="multiple-vertical.html">Multiple sliders</a></li>
 	<li><a href="colorpicker.html">Simple colorpicker</a></li>
+	<li><a href="custom-handle.html">Custom handle</a></li>
 </ul>
 
 </body>

diff --git a/tests/unit/slider/core.js b/tests/unit/slider/core.js
@@ -25,6 +25,18 @@ QUnit.test( "markup structure", function( assert ) {
 	assert.hasClasses( handle[ 1 ], "ui-slider-handle" );
 } );
 
+QUnit.test( "custom handle", function( assert ) {
+	assert.expect( 3 );
+
+	var element = $( "#slider-custom-handle" ).slider();
+	var customHandle = $( ".custom-handle" );
+	var sliderHandles = element.find( ".ui-slider-handle" );
+
+	assert.equal( sliderHandles.length, 1, "Only one handle" );
+	assert.strictEqual( sliderHandles[ 0 ], customHandle[ 0 ], "Correct handle" );
+	assert.equal( customHandle.attr( "tabIndex" ), 0, "tabIndex" );
+} );
+
 QUnit.test( "keydown HOME on handle sets value to min", function( assert ) {
 	assert.expect( 2 );
 	element = $( "<div></div>" );

diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html
@@ -25,8 +25,8 @@
 
 <div id="slider1"></div>
 <div id="slider2"></div>
-<div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;">
-	<div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div>
+<div id="slider-custom-handle">
+	<div class="ui-slider-handle custom-handle"></div>
 </div>
 
 </div>

diff --git a/ui/widgets/slider.js b/ui/widgets/slider.js
@@ -117,7 +117,9 @@ return $.widget( "ui.slider", $.ui.mouse, {
 		this.handle = this.handles.eq( 0 );
 
 		this.handles.each( function( i ) {
-			$( this ).data( "ui-slider-handle-index", i );
+			$( this )
+				.data( "ui-slider-handle-index", i )
+				.attr( "tabIndex", 0 );
 		} );
 	},