Connect to a Slider

Building on the Quick Start example, you can change the labels, tick marks, pointer, background, and the scale of values for the gauge using the labels, tickMajor, tickMinor, pointer, face, and ranges options.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the size, value, and animation used in the widget as well as customizing the appearance of the labels, tick marks, pointer, face, and ranges. It also initializes the wijlineargauge and slider widgets so that when the value of the slider changes, so does the value of the wijlineargauge.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#lineargauge1").wijlineargauge({ width: 400, height: 120, value: 70, max: 100, min: 0, animation: { enabled: true, duration: 400, easing: ">" }, labels: { style: { fill: "#1E395B", "font-size": 12, "font-weight": "800" } }, tickMajor: { position: "inside", offset: -11, interval: 20, factor: 12, style: { fill: "#1E395B", stroke: "none", width: 2 } }, tickMinor: { position: "inside", offset: -11, visible: true, interval: 4, factor: 10, style: { fill: "#1E395B", stroke: "none", width: 1 } }, pointer: { shape: "rect", length: 0.6, style: { fill: "#1E395B", stroke: "#7BA0CC", "stroke-width": 1, opacity: 1 } }, face: { style: { fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": 2 } }, ranges: [{ startValue: 80, endValue: 100, //A ratio value that determines the location of the beginning of the range. startDistance: 0.85, //A ratio value that determines the location of the end of the range. endDistance: 0.85, startWidth: 0.5, endWidth: 0.5, style: { fill: "90-#3DA1D8-#3A6CAC", opacity: 1, stroke: "none" } }] }); $("#slider").slider({ value: $("#lineargauge1").wijlineargauge("option", "value"), change: function (event, ui) { $("#lineargauge1").wijlineargauge("option", "value", ui.value); } }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
    $("#lineargauge1").wijlineargauge({
        width: 400,
        height: 120,
        value: 70,
        max: 100,
        min: 0,
        animation: {
            enabled: true,
            duration: 400,
            easing: ">"
        },
        labels: {
            style: {
                fill: "#1E395B",
                "font-size": 12,
                "font-weight": "800"
            }
        },
        tickMajor: {
            position: "inside",
            offset: -11,
            interval: 20,
            factor: 12,
            style: {
                fill: "#1E395B",
                stroke: "none",
                width: 2
            }
        },
        tickMinor: {
            position: "inside",
            offset: -11,
            visible: true,
            interval: 4,
            factor: 10,
            style: {
                fill: "#1E395B",
                stroke: "none",
                width: 1
            }
        },
        pointer: {
            shape: "rect",
            length: 0.6,
            style: {
                fill: "#1E395B",
                stroke: "#7BA0CC",
                "stroke-width": 1,
                opacity: 1
            }
        },
        face: {
            style: {
                fill: "270-#FFFFFF-#D9E3F0",
                stroke: "#7BA0CC",
                "stroke-width": 2
            }
        },
        ranges: [{
            startValue: 80,
            endValue: 100,
            //A ratio value that determines the location of the beginning of the range.
            startDistance: 0.85,
            //A ratio value that determines the location of the end of the range.
            endDistance: 0.85, 
            startWidth: 0.5,
            endWidth: 0.5,
            style: {
                fill: "90-#3DA1D8-#3A6CAC",
                opacity: 1,
                stroke: "none"
            }
        }]
    });
    $("#slider").slider({
        value: $("#lineargauge1").wijlineargauge("option", "value"),
        change: function (event, ui) {
            $("#lineargauge1").wijlineargauge("option", "value", ui.value);
        }
    });
});
</script>

In the <body> section of your HTML file, replace the basic <div> tag with this markup, which adds a slider widget.

Drop down and copy markup to paste in the <body> section
Markup
Copy Code

<div id="lineargauge1" style="width:400px"></div> <p>Drag and release the slider to change the gauge's value.</p> <div id="slider" style="width:400px"></div>
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the LinearGaugeSlider.

Markup	Copy Code
<div id="lineargauge1" style="width:400px"></div> <p>Drag and release the slider to change the gauge's value.</p> <div id="slider" style="width:400px"></div>

Widgets

Quick Start

Reference