# Wijmo_Chart_Interaction.Rangeselector

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								RangeSelector Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<div class="lead">
									<p>The <a href="wijmo_chart_interaction.rangeselector.html">RangeSelector</a> control displays a range selector that allows the user to
									choose the range of data to display on the specified <a href="wijmo_chart.flexchart.html">FlexChart</a>.</p>
								</div>
								<p>To use the <a href="wijmo_chart_interaction.rangeselector.html">RangeSelector</a> control, specify the <a href="wijmo_chart.flexchart.html">FlexChart</a>
								control to display the selected range of data.</p>
								<p>The <a href="wijmo_chart_interaction.rangeselector.html#rangechanged">rangeChanged</a> event is fired when there is a change in min or max value.
								For example:</p>
								<pre> var rangeSelector = new RangeSelector(chart);
 rangeSelector.rangeChanged.addHandler(function () {
    // perform related updates
    // e.g. modify displayed range of another chart
    update(rangeSelector.min, rangeSelector.max);
  });
</pre>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="target">RangeSelector</span>
									<ul class="tsd-hierarchy">
										<li>
											<a href="wijmo_angular2_chart_interaction.wjflexchartrangeselector.html" class="tsd-signature-type">WjFlexChartRangeSelector</a>
										</li>
									</ul>
								</li>
							</ul>
						</section>
						<section class="tsd-index-group">
							<section class="tsd-index-panel">
								<div class="tsd-index-content">
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Constructors
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#constructor" class="tsd-kind-icon">constructor</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Properties
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#isvisible" class="tsd-kind-icon">is<wbr>Visible</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#max" class="tsd-kind-icon">max</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#maxscale" class="tsd-kind-icon">max<wbr>Scale</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#min" class="tsd-kind-icon">min</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#minscale" class="tsd-kind-icon">min<wbr>Scale</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#orientation" class="tsd-kind-icon">orientation</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#seamless" class="tsd-kind-icon">seamless</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Methods
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#onrangechanged" class="tsd-kind-icon">on<wbr>Range<wbr>Changed</a></li>
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#remove" class="tsd-kind-icon">remove</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Events
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-event tsd-parent-kind-class"><a href="wijmo_chart_interaction.rangeselector.html#rangechanged" class="tsd-kind-icon">range<wbr>Changed</a></li>
										</ul>
									</section>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Constructors</h2>
							<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
								<a name="constructor" class="tsd-anchor"></a>
								<h3>constructor</h3>
								<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">new <wbr>Range<wbr>Selector<span class="tsd-signature-symbol">(</span>chart<span class="tsd-signature-symbol">: </span><a href="wijmo_chart.flexchartcore.html" class="tsd-signature-type">FlexChartCore</a>, options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="wijmo_chart_interaction.rangeselector.html" class="tsd-signature-type">RangeSelector</a></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Initializes a new instance of the <a href="wijmo_chart_interaction.rangeselector.html">RangeSelector</a> class.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5>chart: <a href="wijmo_chart.flexchartcore.html" class="tsd-signature-type">FlexChartCore</a></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>The <a href="wijmo_chart.flexchart.html">FlexChart</a> that displays the selected range.</p>
													</div>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">any</span></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>A JavaScript object containing initialization data for the control.</p>
													</div>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <a href="wijmo_chart_interaction.rangeselector.html" class="tsd-signature-type">RangeSelector</a></h4>
									</li>
								</ul>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Properties</h2>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="isvisible" class="tsd-anchor"></a>
								<h3>isVisible</h3>
								<div class="tsd-signature tsd-kind-icon">is<wbr>Visible<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the visibility of the range selector.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="max" class="tsd-anchor"></a>
								<h3>max</h3>
								<div class="tsd-signature tsd-kind-icon">max<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the maximum value of the range.
										If not set, the maximum is calculated automatically.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="maxscale" class="tsd-anchor"></a>
								<h3>maxScale</h3>
								<div class="tsd-signature tsd-kind-icon">max<wbr>Scale<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the maximum amount of data that can be selected,
											as a percentage of the total range.
										This property must be set to a value between zero and one.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="min" class="tsd-anchor"></a>
								<h3>min</h3>
								<div class="tsd-signature tsd-kind-icon">min<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the minimum value of the range.
										If not set, the minimum is calculated automatically.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="minscale" class="tsd-anchor"></a>
								<h3>minScale</h3>
								<div class="tsd-signature tsd-kind-icon">min<wbr>Scale<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the minimum amount of data that can be selected,
											as a percentage of the overall chart range.
										This property must be set to a value between zero and one.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="orientation" class="tsd-anchor"></a>
								<h3>orientation</h3>
								<div class="tsd-signature tsd-kind-icon">orientation<span class="tsd-signature-symbol">:</span> <a href="../enums/wijmo_chart_interaction.orientation.html" class="tsd-signature-type">Orientation</a></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the orientation of the range selector.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="seamless" class="tsd-anchor"></a>
								<h3>seamless</h3>
								<div class="tsd-signature tsd-kind-icon">seamless<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets a value that determines whether the min/max elements
										may be reversed by dragging one over the other.</p>
									</div>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Methods</h2>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="onrangechanged" class="tsd-anchor"></a>
								<h3>onRangeChanged</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">on<wbr>Range<wbr>Changed<span class="tsd-signature-symbol">(</span>e<span class="tsd-signature-symbol">?: </span><a href="wijmo.eventargs.html" class="tsd-signature-type">EventArgs</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Raises the <a href="wijmo_chart_interaction.rangeselector.html#rangechanged">rangeChanged</a> event.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> e: <a href="wijmo.eventargs.html" class="tsd-signature-type">EventArgs</a></h5>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="remove" class="tsd-anchor"></a>
								<h3>remove</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">remove<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Removes the <a href="wijmo_chart_interaction.rangeselector.html">RangeSelector</a> control from the chart.</p>
											</div>
										</div>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Events</h2>
							<section class="tsd-panel tsd-member tsd-kind-event tsd-parent-kind-class">
								<a name="rangechanged" class="tsd-anchor"></a>
								<h3>rangeChanged</h3>
								<div class="tsd-signature tsd-kind-icon">range<wbr>Changed<span class="tsd-signature-symbol">:</span> <a href="wijmo.event.html" class="tsd-signature-type">Event</a><span class="tsd-signature-symbol">&lt;</span><a href="wijmo_chart_interaction.rangeselector.html" class="tsd-signature-type">RangeSelector</a><span class="tsd-signature-symbol">, </span><a href="wijmo.eventargs.html" class="tsd-signature-type">EventArgs</a><span class="tsd-signature-symbol">&gt;</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Occurs after the range changes.</p>
									</div>
								</div>
							</section>
						</section>
					</div>