Slider コンポーネント — sgcHTML | eSeGeCe

Slider

TsgcHTMLComponent_Slider — Delphi、C++ Builder、.NET で、ライブ値バッジ、任意の最小/最大ラベル、カラースタイルを備えた Bootstrap レンジスライダーをレンダリングします。

TsgcHTMLComponent_Slider

ラベル付きの Bootstrap form-range 入力です。Min/Max/Step の範囲と開始値の Value を設定し、ColorStyle を選択してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Slider

レンダリング内容

Bootstrap form-range + ライブ値バッジ

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

範囲を設定し、レンダリングする

MinMaxStep と開始値の 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

主なプロパティとメソッド

最もよく使うメンバーです。

Range

Min(デフォルト 0)、Max(デフォルト 100)、Step(デフォルト 1)が <input type="range"> の範囲を決めます。

Value

Value は開始位置を設定します。ShowValue(デフォルト True)は、ユーザーがドラッグする際にインラインの oninput ハンドラーで更新されるライブバッジをレンダリングします。

Labels

LabelText は、スライダーの上に form-label をレンダリングします。ShowMinMax(デフォルト False)は、トラックの下に Min/Max の範囲を表示します。

Color

Color は生の16進文字列を受け付けます。空の場合、ColorStyleTsgcHTMLColor、デフォルト hcPrimary)が、トラックと値バッジの両方にアクセントカラーを提供します。

Posting

FieldNamename 属性を設定し、値がフォームと一緒に送信されるようにします。Disabled は送信対象から除外します。

Identity

SliderID は要素の id を設定します(sld_<FieldName> または自動生成された id にフォールバックします)。

さらに詳しく

オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。
すべての sgcHTML コンポーネント80 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。