How to Display a Custom Horizontal Scrollbar (Handle) Using Slider and jQuery UI｜DAD UNION

In this article, I’ll show you how to display a custom horizontal scrollbar (handle) using Slider and jQuery UI. This custom scrollbar handle can be adjusted to control values in content production.

Contents

JavaScript Code to Display a Custom Horizontal Scrollbar (Handle) Using Slider and jQuery UI
CSS Code to Display a Custom Horizontal Scrollbar (Handle)
HTML Code to Display a Custom Horizontal Scrollbar (Handle)
Demo Page to Display a Custom Horizontal Scrollbar (Handle) Using jQuery UI
Source: Slider | jQuery UI

JavaScript Code to Display a Custom Horizontal Scrollbar (Handle) Using Slider and jQuery UI

*Load the jquery.min.js and jquery-ui.min.js files. Set the minimum value, maximum value, change value, and image for the horizontal scrollbar (handle) area (#slider01).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  var drawData = {
        brushSize : 1
      };
	  
  $("#slider01").slider(
      {
        min: 1,	// Minimum value
        max: 5,	// Maximum value
        value : 1,	// Initial value
        slide : function(evt, ui){
			drawData.brushSize = ui.value;
			$( "#idFimg" ).attr('src','img'+drawData.brushSize+'.jpg');	// Change image
			$( "#idy_font" ).attr('value',drawData.brushSize);		// Change value
		}
      }
    );
});
</script>

CSS Code to Display a Custom Horizontal Scrollbar (Handle)

*Load the jquery-ui.css file. Set the style and background image for the horizontal scrollbar (handle) area (#slider01).

<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
body {
	margin: 0px;
	font-size: 14px;
}
h1{
	font-size: 16px;
	font-weight: normal;
	line-height: 1.2em;
	text-align: center;
	padding-bottom: 15px;
}
a{
	font-size: 16px;
	text-decoration: none;
}
p{
	text-align: center;
}
#idWrap{
	width: 235px;
	margin: 0 auto;
	text-align: center;
}
#slider01 {
	height: 8px;
	background: url(bg_slide01.jpg) left 3px repeat-x;
	border: none;
}
input{
	 text-align: center;
}
-->
</style>

HTML Code to Display a Custom Horizontal Scrollbar (Handle)

*Set the style for the horizontal scrollbar (handle) area (id=”slider01″) and the thumbnail image that switches with scrolling. Adjust as needed.

<h1>Display a Custom Horizontal Scrollbar (Handle) Using jQuery UI</h1>
<p>Slide the custom horizontal scrollbar below to change the value and image in the textbox below.</p>
<div id="idWrap">
	<!-- Custom Horizontal Scrollbar -->
	<div id="slider01"></div><br>　<br>
	<!-- Change the value in the textbox -->
	<input size="2" id="idy_font" name="y_font" type="text" value="1" /><br>　<br>
	<!-- Switch image according to the value -->
	<div id="idFont01"><img id="idFimg" src="img1.jpg" alt="" border="0" width="50" height="50" /></div>
</div>

Sliding the custom horizontal scrollbar will switch the value in the textbox and the image.