RangeSlider example

Introduction

In this article we'll see how to integrate a RangeSlider type component into the RD3 graphics engine without using external libraries. We want to obtain this result:
Attached you can also find the example project for the FLUID graphics engine.

Definition in the IDE

First, in the project we created a client library called RangeSlider and defined the properties, methods, and events:

The MinValue and MaxValue properties are used to set the range of possible values within which the value may vary.
The BackColor property is used to set the object color. In this example we will change it based on the value of the field.
The RawValue property is used to read the actual value of the slider.
The Step property is used to set the granularity of the value.
The OnEvent event is fired server side when the value of the field changes.

Then, a form was created with an in-list panel onto which we dragged the client library.
The tooltip and the color of the slider are set in the OnDynamicProperties event based on the value selected.

Client-side wrapper class

In the custom directory a JavaScript file, RangeSlider.js, was created containing our code and a CSS file, range-slider.css with just 3 CSS classes.

Note: We did not change the Desktop.htm and Desktop_sm.htm files, because the RangeSlider.js file is loaded automatically, while the range-slider.css file is loaded when the JavaScript for the RangeSlider class is loaded.

In the JavaScript class, the constructor was defined in which some default values were set for some properties, and an extension of the CustomElement class was defined.

Loading the CSS

The LoadRequirements static method of the CustomElement class is used to load the CSS.

Creating the component

The Realize method was defined, in which the element is built completely manually (no third-party components are used).

In the AttachEvents method, events are managed for intercepting user selections. When a move is detected, the SetValue method is called to set the value and fire the change to the server, calling the OnChange method. These two steps are crucial to ensure that the field acquires the change. It's important to emphasize the need to implement the GetDOMObj method that is called by the framework to get the pointer for the main DOM object. In this example we will return the this.SliderBox object.