diff --git a/demos/slider/custom-handle.html b/demos/slider/custom-handle.html
new file mode 100644
index 000000000..11192f318
--- /dev/null
+++ 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
index 1bc1198c4..f853a79aa 100644
--- 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>
