Connect to a Slider

Building on the Quick Start example, you can change the markers, the marker colors and gradients, and the rotation of the label text using the axis, seriesList, and seriesStyles 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.

Drop down and copy script to paste in <head> section

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

Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the LinearGaugeSlider.

See Also

Widgets

Reference