Snapping slider
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
new Ext.Slider({
renderTo: 'basic-slider',
width: 214,
minValue: 0,
maxValue: 100
});
new Ext.Slider({
renderTo: 'increment-slider',
width: 214,
value:50,
increment: 10,
minValue: 0,
maxValue: 100
});
new Ext.Slider({
renderTo: 'vertical-slider',
height: 214,
vertical: true,
minValue: 0,
maxValue: 100
});
new Ext.Slider({
renderTo: 'tip-slider',
width: 214,
minValue: 0,
maxValue: 100,
plugins: new Ext.ux.SliderTip()
});
var tip = new Ext.ux.SliderTip({
getText: function(slider){
return String.format('<b>{0}% complete</b>', slider.getValue());
}
});
new Ext.Slider({
renderTo: 'custom-tip-slider',
width: 214,
increment: 10,
minValue: 0,
maxValue: 100,
plugins: tip
});
new Ext.Slider({
renderTo: 'custom-slider',
width: 214,
increment: 10,
minValue: 0,
maxValue: 100,
plugins: new Ext.ux.SliderTip()
});
});
</script>
</head>
<body>
<!-- EXAMPLES -->
<h1>Ext Slider Example</h1>
<p>Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.</p>
<h3>Basic Slider</h3>
<div id="basic-slider"></div>
<br/>
<h3>Snapping Slider</h3>
<div id="increment-slider"></div>
<br/>
<h3>Vertical Slider</h3>
<div id="vertical-slider"></div>
<br/>
<h3>Slider with tip</h3>
<div id="tip-slider"></div>
<br/>
<h3>Slider with custom tip</h3>
<div id="custom-tip-slider"></div>
<br/>
<h3>CSS Customized Slider</h3>
<div id="custom-slider"></div>
<!-- extra space for scrolling -->
<div style="height:150px;"></div>
</body>
</html>
Related examples in the same category