Slider
TsgcHTMLComponent_Slider — Delphi、C++ Builder、.NET で、ライブ値バッジ、任意の最小/最大ラベル、カラースタイルを備えた Bootstrap レンジスライダーをレンダリングします。
TsgcHTMLComponent_Slider — Delphi、C++ Builder、.NET で、ライブ値バッジ、任意の最小/最大ラベル、カラースタイルを備えた Bootstrap レンジスライダーをレンダリングします。
ラベル付きの Bootstrap form-range 入力です。Min/Max/Step の範囲と開始値の Value を設定し、ColorStyle を選択してから、HTML プロパティを読み取ります。
TsgcHTMLComponent_Slider
Bootstrap form-range + ライブ値バッジ
Delphi, C++ Builder, .NET
Min、Max、Step と開始値の Value を設定し、ColorStyle を選択してから、HTML を読み取ります。
uses
sgcHTML_Enums, sgcHTML_Component_Slider;
var
oSlider: TsgcHTMLComponent_Slider;
begin
oSlider := TsgcHTMLComponent_Slider.Create(nil);
try
oSlider.FieldName := 'volume';
oSlider.LabelText := 'Volume';
oSlider.Min := 0;
oSlider.Max := 100;
oSlider.Step := 5;
oSlider.Value := 50;
oSlider.ShowMinMax := True;
oSlider.ColorStyle := hcSuccess;
WebModule.Response := oSlider.HTML; // form-range + live value badge
finally
oSlider.Free;
end;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Slider.hpp
TsgcHTMLComponent_Slider *oSlider = new TsgcHTMLComponent_Slider(NULL);
try
{
oSlider->FieldName = "volume";
oSlider->LabelText = "Volume";
oSlider->Min = 0;
oSlider->Max = 100;
oSlider->Step = 5;
oSlider->Value = 50;
oSlider->ShowMinMax = true;
oSlider->ColorStyle = hcSuccess;
String html = oSlider->HTML; // form-range + live value badge
}
__finally
{
delete oSlider;
}
using esegece.sgcWebSockets;
var slider = new TsgcHTMLComponent_Slider();
slider.FieldName = "volume";
slider.LabelText = "Volume";
slider.Min = 0;
slider.Max = 100;
slider.Step = 5;
slider.Value = 50;
slider.ShowMinMax = true;
slider.ColorStyle = TsgcHTMLColor.hcSuccess;
string html = slider.HTML; // form-range + live value badge
最もよく使うメンバーです。
Min(デフォルト 0)、Max(デフォルト 100)、Step(デフォルト 1)が <input type="range"> の範囲を決めます。
Value は開始位置を設定します。ShowValue(デフォルト True)は、ユーザーがドラッグする際にインラインの oninput ハンドラーで更新されるライブバッジをレンダリングします。
LabelText は、スライダーの上に form-label をレンダリングします。ShowMinMax(デフォルト False)は、トラックの下に Min/Max の範囲を表示します。
Color は生の16進文字列を受け付けます。空の場合、ColorStyle(TsgcHTMLColor、デフォルト hcPrimary)が、トラックと値バッジの両方にアクセントカラーを提供します。
FieldName は name 属性を設定し、値がフォームと一緒に送信されるようにします。Disabled は送信対象から除外します。
SliderID は要素の id を設定します(sld_<FieldName> または自動生成された id にフォールバックします)。