jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
72 lines (65 loc) • 3.52 kB
HTML
<html>
<head>
<meta name="keywords" content="jQuery Slider, Slider Widget, RangeSlider" />
<meta name="description" content="jqxSlider represents a flexible jQuery Slider that lets the user select from a range of values by moving a thumb along a track. The widget is completely customizable in terms of appearance and offers numerous configuration options like mouse wheel and keyboard support, smooth or step-based slider and support for range sliders." />
<title id='Description'>jqxSlider represents a flexible jQuery Slider that lets the user select from a range of values by moving a thumb along a track. The widget is completely customizable in terms of appearance and offers numerous configuration options like mouse wheel and keyboard support, smooth or step-based slider and support for range sliders. TypeScript example.</title>
<!-- 1. Load references -->
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="typescript-slider.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<style type="text/css">
.colorBlock {
border: 1px solid #aaa;
width: 200px;
height: 200px;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.colorLabel {
padding: 6px;
}
</style>
<!-- 2. Create initialization -->
<script>
$(document).ready(function ()
{
createSlider('#jqxcheckbox', '#redLevel', '#greenLevel', '#blueLevel', 'colorLabel', 'colorBlock');
});
</script>
</head>
<!-- 3. Display the application -->
<body>
<div class="example-description">
jqxSlider represents a flexible jQuery Slider that lets the user select from a range of values by moving a thumb along a track. The widget is completely customizable in terms of appearance and offers numerous configuration options like mouse wheel and keyboard support, smooth or step-based slider and support for range sliders. TypeScript example.
</div>
<div style="width: 550px">
<div style="height: 180px;">
<div style="float: left">
<span style="font-style: italic;">Red</span>
<div id='redLevel'>
</div>
<span style="font-style: italic;">Green</span>
<div id='greenLevel'>
</div>
<span style="font-style: italic;">Blue</span>
<div id='blueLevel'>
</div>
</div>
<div class="colorBlock jqx-rc-all" id="colorBlock">
<div class="colorLabel" id="colorLabel">
</div>
</div>
</div>
<div id="jqxcheckbox">Smooth Thumb Drag</div>
</div>
</body>
</html>