# wjLinearGauge Class

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								wjLinearGauge Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<div class="lead">
									<p>KnockoutJS binding for the <a href="wijmo_gauge.lineargauge.html">LinearGauge</a> control.</p>
								</div>
								<p>Use the <a href="wijmo_knockout_gauge.wjlineargauge.html">wjLinearGauge</a> binding to add <a href="wijmo_gauge.lineargauge.html">LinearGauge</a> controls to your
								KnockoutJS applications. For example:</p>
								<pre>&lt;p&gt;Here is a LinearGauge control:&lt;/p&gt;
&lt;div data-bind="wjLinearGauge: {
        value: props.value,
        min: props.min,
        max: props.max,
        format: props.format,
        showRanges: props.showRanges }"
        &lt;class="linear-gauge"&gt;
    &lt;div data-bind="wjRange: {
            wjProperty: 'pointer',
            thickness: props.ranges.pointerThickness }"&gt;
    &lt;/div&gt;
    &lt;div data-bind="wjRange: {
            min: props.ranges.lower.min,
            max: props.ranges.lower.max,
            color: props.ranges.lower.color }"&gt;
    &lt;/div&gt;
    &lt;div data-bind="wjRange: {
            min: props.ranges.middle.min,
            max: props.ranges.middle.max,
            color: props.ranges.middle.color }"&gt;
    &lt;/div&gt;
    &lt;div data-bind="wjRange: {
            min: props.ranges.upper.min,
            max: props.ranges.upper.max,
            color: props.ranges.upper.color }"&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
								<p>The <b>wjLinearGauge</b> binding may contain the <a href="wijmo_knockout_gauge.wjrange.html">wjRange</a> child binding.</p>
								<p>The <b>wjLinearGauge</b> binding supports all read-write properties and events of
								the <a href="wijmo_gauge.lineargauge.html">LinearGauge</a> control. The <b>value</b> property provides two-way binding mode.</p>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="tsd-signature-type">WjGaugeBinding</span>
									<ul class="tsd-hierarchy">
										<li>
											<span class="target">wjLinearGauge</span>
											<ul class="tsd-hierarchy">
												<li>
													<a href="wijmo_knockout_gauge.wjbulletgraph.html" class="tsd-signature-type">wjBulletGraph</a>
												</li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</section>
					</div>