Slider fxSlider (fx.slider.js)

2015-08-24

Applies To: Windows Azure Pack

fxSlider allows the user to select a number within a scale by dragging the slider, or by typing a value in the box on the right. Optionally includes a legend.

Windows Azure Pack fxSlider

Supported Services

Service	Supported
Undo/Redo	Yes
Validation	No

Widgets

$("Selector").fxSlider()

Properties

Name	Type	Description
fx.fxSlider.options.inputId	String	Id attribute of the slider. If not provided, the id attribute is not added.
fx.fxSlider.options.legendOptions	Object	Options passed to the legend widget. For more information, see Legend fxLegend (fx.legend.js).
fx.fxSlider.options.max	Number	The slider’s Maximum value.
fx.fxSlider.options.min	Number	The slider’s Minimum value.
fx.fxSlider.options.slidableMax	Number	Maximum value the user can slide to the maximum. If null, there is no maximum value.
fx.fxSlider.options.step	Number	Determines the amount of steps the slider takes between the minimum and maximum values.

Methods

Name	Description	Returns	Parameters
fx.fxSlider.destroy	Destroys the widget.	Nothing	None

Sample

<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8"/>
        <title>Simple Slider Examples</title>
        <!-- Style Links -->
        <link href="/Content/_oss/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
        <link href="/Content/UxFxCss.css" rel="stylesheet" type="text/css" />
        <link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.Samples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="scriptLinksContainer">
            <!-- JQuery scripts-->
            <script src="/Scripts/_oss/jquery-1.7.1.js"></script>
            <script src="/Scripts/_oss/jquery-ui-1.8.18.js"></script>

            <!-- Knockout script -->
            <script src="/Scripts/_oss/knockout-2.1.0.js"></script>

            <!-- fx shell scripts -->
            <script src="/Scripts/UxFxScript.js"></script>
        </div>

    <!-- Sample HTML code -->
    <div id="sampleHTMLCodeContainer">
        <div>
            <button id="EnableButton">Enable</button>
            <button id="DisableButton">Disable</button><br />
            Current value on changed: <span id="CurrentValueOnChangedSpan" ></span><br />
            Current value on demand: <span id="CurrentValueOnDemandSpan" ></span><button id="CurrentValueButton">Get</button><br />
            Select this value: <input id="SelectValueTextBox" type="text" style="width:55px" /><button id="SelectValueButton">Select</button><br />
            <button id="RevertButton">Revert to Original Value</button><br />
            <button id="UpdateInitialValueButton">Update Initial Value</button><br />
            <input id="TrackEditCheckbox" type="checkbox" checked="checked" /> Track Edit<br />
            Set max slidable value to <input id="MaxSlidableValueTextBox" type="text" style="width:55px" /><button id="MaxSlidableValueButton">Set</button><br/>
            Set min slidable value to <input id="MinSlidableValueTextBox" type="text" style="width:55px" /><button id="MinSlidableValueButton">Set</button><br/>
            <br/>Changes to these values require the slider to be regenerated<br/>
            Set max value to <input id="MaxValueTextBox" type="text" style="width:55px" /><br/>
            Set min value to <input id="MinValueTextBox" type="text" style="width:55px" /><br/>
            Set step to <input id="StepTextBox" type="text" style="width:55px" /><br/>
            <button id="RegenSlider">Regenerate</button><br/>
        </div>
        <br />

        <div id="slider"></div>
        <!-- Workaround IE9 cache issue where it doesn't like to lonely spans that only have text changing-->
        <div id="MessageSpanContainer"><span id="MessageSpan" style="color:Green">Not Edited</span></div>
    </div>

    <!-- Sample Script Code -->
    <div id="sampleScriptCodeContainer">
        <script type="text/javascript">
            //Enable our buttons/textboxes/controls
            var getSelectedValue = function() {
                return $("#slider").fxSlider("value");
            };

            $("#EnableButton").click(function() {
                $("#slider").fxSlider("enable");
            });

            $("#DisableButton").click(function() {
                $("#slider").fxSlider("disable");
            });

            //Get current value
            $("#CurrentValueButton").click(function() {
                $("#CurrentValueOnDemandSpan").text(getSelectedValue());
            });

            //Select a specified value
            $("#SelectValueButton").click(function() {
                $("#slider").fxSlider("option", "value", $("#SelectValueTextBox").val());
            });

            //Reset to default value
            $("#RevertButton").click(function() {
                $("#slider").fxSlider("undo");
            });

            //Change the default value
            $("#UpdateInitialValueButton").click(function() {
                $("#slider").fxSlider("resetOriginal");
            });

            //Bind to the change event
            $("#slider").bind("change.fxcontrol", function() {
                $("#MessageSpan").html($(this).fxEditableControl("hasEditedControls") ? "<span id='Span1' style='color:Red;font-weight:bold'>Edited</span>" : "<span id='Span2' style='color:Green;font-weight:normal'>Not Edited</span>");
            });

            //track edits or not
            $("#TrackEditCheckbox").change(function() {
                $("#slider").fxSlider("option", "trackedit", $("#TrackEditCheckbox").is(':checked') ? true : false);
            });

            $("#MaxValueButton").click(function() {
                $("#slider").fxSlider("option", "max", parseInt($("#MaxValueTextBox").val()));
            });

            $("#MinValueButton").click(function() {
                $("#slider").fxSlider("option", "min", $("#MinValueTextBox").val());
            });

            $("#MaxSlidableValueButton").click(function() {
                $("#slider").fxSlider("option", "slidableMax", $("#MaxSlidableValueTextBox").val());
            });

            $("#MinSlidableValueButton").click(function() {
                $("#slider").fxSlider("option", "slidableMin", $("#MinSlidableValueTextBox").val());
            });

            $("#StepButton").click(function() {
                $("#slider").fxSlider("option", "step", $("#StepTextBox").val());
            });

            $("#RegenSlider").click(function() {
                $("#slider").fxSlider("destroy");
                $("#slider").fxSlider({
                    value: $("#SelectValueTextBox").val().length ? parseInt($("#SelectValueTextBox").val()) : 5, //Get value from textbox if exists, else use default
                    min: $("#MinValueTextBox").val().length ? parseInt($("#MinValueTextBox").val()) : 0, 
                    max: $("#MaxValueTextBox").val().length ? parseInt($("#MaxValueTextBox").val()) : 10,
                    step: $("#StepTextBox").val().length ? parseInt($("#StepTextBox").val()) : 1, //size of drag step
                    slidableMin: $("#MinSlidableValueTextBox").val().length ? parseInt($("#MinSlidableValueTextBox").val()) : null, 
                    slidableMax: $("#MaxSlidableValueTextBox").val().length ? parseInt($("#MaxSlidableValueTextBox").val()) : null, 
                    change: function(event, arg) { 
                        $("#CurrentValueOnChangedSpan").text(arg.value);
                    }
                });
            });

            $("#slider").fxSlider({
                value: 5, //default value
                min: 0, //minimum value
                max: 10, //max value
                slidableMin: 1, //minimum sliding value
                slidableMax: 9, //max sliding value
                change: function(event, arg) { //do something when the value is changed
                    $("#CurrentValueOnChangedSpan").text(arg.value);
                }
            });
        </script>
    </div>

</body>
</html>

Share via