Making a slider control

In this mini article we are going to create a normal slider control. It is actually very simple and hardly deserves a full article, but since HTML and the DOM (document object model) have a long and bumpy trail of evolution behind it – some explanation is in order.

Setting it up

Under the DOM, a slider is actually a text-box in disguise. So to create a slider, you simply alter some properties of a normal TW3Editbox and it magically turns into a range-based slider instead. I’m not sure what the programmers behind the DOM thought when they made this rule, but I’m sure they had their reasons.

So, start by creating a new visual application. This also creates a default form for us. Now click the editbox icon from the component palette – and then click on the form. Resize and position the box as you see fit.

Editbox sized and ready

Now that we have our editbox lined up, make sure you click CTRL + S (save shortcut) so that the form design data is stored in your project file. Once you have done so, switch over to the code tab. Alter the initializeObject() method by adding the following text:

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  W3EditBox1.InputType:=itRange;
  W3EditBox1.setMin(0);
  W3EditBox1.setMax(100);
  w3EditBox1.OnChanged:=Procedure (sender:TObject)
  var
    mValue: Integer;
  begin
    mValue:=TVariant.asInteger(w3EditBox1.handle.value);
    writeln(mValue);
  end;
end;

Why the esoteric handle stuff?

The reason we have to access the value property of the DOM element directly (handle always points to the actual HTML element), is because of an old difference in browser API. FireFox supports the older “range” property of the element, but the modern API supported by nearly all browsers today is to obtain the value via the.. well, value property. The Smart RTL sadly used the older variation when it was written, but the next update will have the correct range property.

Voila, sliders galore