jQuery RangeSelector

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

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div style="background-color: yellow; height: 150px; width: 250px;">
    No Widget (Container Yellow)
<div style="background-color: blue; height: 100px; width: 200px;">
<div style="background-color: gray; width: 100%; height:100%;">
    Contained Div (Gray)
</div>
</div>
</div>
<p>
<div style="background-color: orange; height: 150px; width: 250px; z-index: 3">
    With Widget (Container Orange)
<div id="rangeSelector" style="background-color: blue; height: 100px; width: 200px;">
<div style="background-color: lightgray; width: 100%; height:100%;">
    Contained Div (Light Gray)
</div>
</div>
</div>

JavaScript

$("#rangeSelector").jqxRangeSelector({
     width: '200px',
     height: '100px',
     theme:'energyblue',
     min: 0,
     max: 100,
     padding: "0px",
     range: {
         from: 10,
         to: 50
     },
     majorTicksInterval: 10,
     minorTicksInterval: 1
 });