Niagara Set Point Slider

  • Sets Numeric Writable
  • Updates in Real-time
  • Horizontal Or Vertical
  • Easy To Use
  • Works in Workbench and Modern Browser
Add to Cart
n4 slider


The set point slider control is a intuitive user interface to set a numeric writable within a range. It updates in real-time if the point changes value. Can be viewed as horizontal or vertical simply by changing the configuration setting. Before you start, copy the setPointSlider-ux.jar file to your modules directory. Restart the station and Workbench.


1. Copy the setPointSlider-ux.jar file to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.

Tridium slider


bms totals chart properties

The widget has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:

Widget Ord Binding (wbViewBinding):

This can be an absolute ord, e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5
relativized ORD e.g. slot:AHU5

Using in your HTML Page

You can now use the widget in your custom html page as long as the html file is in a appropriate station directory. E.g.:

1. Create an html page and place in your station files directory.
2. Create a div element and give it an id so you can inject the widget into this area. E.g.: widget1.
3. Add the following scripts before the closing head tag or the closing body tag. E.g.:

        <script type="text/javascript">

            var require = {
                paths: {
                    "nmodule": "/module",
                    "baja": "/module/bajaScript/rc/plugin/baja",
                    "bajaScript": "/module/bajaScript/rc",
                    "bajaux": "/module/bajaux/rc",
                    "lex": "/module/js/rc/lex/lexplugin",
                    "css": "/module/js/com/tridium/js/ext/require/css",

                    "jquery": "/module/js/rc/jquery/jquery-2.1.1.min", // use jquery-3.2.0.min for versions higher than N4.4
                    "Promise": "/module/js/rc/bluebird/bluebird",

                    // these are runtime dependencies
                    "hbs": "/module/js/rc/require-handlebars-plugin/hbs",
                    "i18nprecompile": "/module/js/rc/require-handlebars-plugin/hbs/i18nprecompile",
                    "json2": "/module/js/rc/require-handlebars-plugin/hbs/json2",
                    "underscore": "/module/js/rc/underscore/underscore",

                hbs: {
                    disableI18n: true
        <script type="text/javascript"
            require(['/module/totalsChart/rc/'], function (app) {

                    backgroundColor: null,
                    barColors: '#8360b2, #9fc757, #4386d4, #b53937, #dcab10, #36b736',
                    barBorderColors: '#6d4b9b, #93bf40, #2a6ebb, #9c3230, #947538, #2f9d2f',
                    comparisonOrd1: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU1
                    comparisonOrd2: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU2
                    comparisonOrd3: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU3
                    comparisonOrd4: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU4
                    comparisonOrd5: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5
                    comparisonOrd6: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU6
                    divId: '#widget1',
                    fontFamily: 'Arial',
                    innerCircleRadius: 56,
                    innerCircleColor: '#262626',
                    padding: '25,50,25,50',
                    symbol: 'Kw',
                    symbolFontSize: 16,
                    symbolFontColor: '#fff',
                    titleFontColor: '#fff',
                    titleFontSize: '16px',
                    title: 'Total',
                    valueFontSize: 34,
                    valueFontColor: '#fff',
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->

You May Also Like

Sensor Status Bar

N4 View Builder™©

tridium bms system

Spectrum Gauge

back to more widgets...