lazarus.fresnel/demo/Slider/MainUnit.pas

unit MainUnit;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls;

type

  { TFresnelSliderForm }

  TFresnelSliderForm = class(TFresnelForm)
    CaptionDiv: TDiv;
    Div1: TDiv;
    CaptionLabel: TLabel;
    SliderDiv: TDiv;
    SliderPointDiv: TDiv;
    SliderRangeDiv: TDiv;
    ValueLabel: TLabel;
    procedure FresnelSliderFormCreate(Sender: TObject);
  private
  public
  end;

var
  FresnelSliderForm: TFresnelSliderForm;

implementation

{$R *.lfm}

{ TFresnelSliderForm }

procedure TFresnelSliderForm.FresnelSliderFormCreate(Sender: TObject);
begin
  Stylesheet.Text:=
     'div { border: 1px solid; }'
    +'.SliderCaptionDiv {'
    +'  margin-bottom: 4px;'
    +'  font-size: 12px;'
    +'  width: 100%;'
    +'  border: 1px solid;'
    +'}'
    +'.SliderLabel {'
    +'}'
    +'.SliderValue {'
    +'  margin-left: 5px;'
    +'  font-size: 13px;'
    +'  font-weight: 700;'
    +'  color: #f66020;'
    +'}'
    +'.Slider {'
    +'  display: none;' // testing
    +'  margin: 15px 0 5px;'
    +'  border: 1px solid #5080e0;'
    +'  background-color: #b6d6f0;'
    +'  height: 9px;'
    +'  border-radius: 6px;'
    +'  width: 100%;'
    +'}'
    +'.SliderRange {'
    +'  display: block;'
    +'  position: absolute;'
    +'  z-index: 1;'
    +'  font-size: .7em;'
    +'  border: 0;'
    +'  background-color: #5ca0cc;'
    +'  top: 0;'
    +'  height: 100%;'
    +'}'
    +'.SliderPoint {'
    +'  position: absolute;'
    +'  z-index: 2;'
    +'  width: 15px;'
    +'  height: 15px;'
    +'  border: 1px solid #385590;'
    +'  background-color: #fff;'
    +'  border-radius: 50%;'
    +'  cursor: pointer;'
    +'  top: -.3em;'
    +'  margin-left: -.6em;'
    +'}'
    ;
  Div1.Style:='width: 150px';
end;

end.