jQuery RangeSelector

Set the width property of the jqxRangeSelector. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="rangeSelector"></div>

JavaScript

$("#rangeSelector").jqxRangeSelector({
         width: 1800,
         height: 100,
         min: new Date(2014, 0, 1, 0, 0, 0),
         max: new Date(2014, 3, 1, 0, 0, 0),
         range: {
             from: new Date(2014, 0, 5, 0, 0, 0),
             to: new Date(2014, 0, 18, 0, 0, 0)
         },
         majorTicksInterval: {
             years: 1
         },
         minorTicksInterval: {
             days: 3
         },
         labelsFormat: 'yyyy',
         markersFormat: 'dd MM yyyy',
         snapToTicks: false,
         showMinorTicks: true
     });
//		x-0-x
//		[ 1, 4, 7, 10 ]
//		[ 3, 6, 9, 12, 15, 18, 21 ]
//		[ 4, 7, 10, 13, 16, 19, 22 ]