ユーザーインターフェイス / コンポーネント / スライダー

スライダー

NativeScript Sliderコンポーネントを使用すると、ユーザーはコントロールをドラッグして値を選択できます。 コンポーネントのminValueおよびmaxValue設定することにより、使用する特定の範囲を設定できます。

使用法

<Slider value="10" minValue="0" maxValue="100" loaded="onSliderLoaded" />
function onSliderLoaded(argsloaded) {
    const sliderComponent = argsloaded.object;
    sliderComponent.on("valueChange", (args) => {
        const slider = args.object;
        console.log(`Slider new value ${slider.value}`);
    });
}

exports.onSliderLoaded = onSliderLoaded;
import { Slider } from "tns-core-modules/ui/slider";

export function onSliderLoaded(argsloaded) {
    let sliderComponent: Slider = <Slider> argsloaded.object;
    sliderComponent.on("valueChange", function(args) {
        let slider = <Slider>args.object;
        console.log(`Slider new value ${slider.value}`);
    });
}

デモソース


スタイリング

<Slider value="10" minValue="0" maxValue="100" backgroundColor="green" color="red" />

デモソース


コードビハインドによるSliderコンポーネントの作成

<StackLayout id="stackLayoutId">
        <Label text="{{ 'Result: ' + slResult}}" textWrap="true" />

</StackLayout>
function onPageLoaded(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    const stackLayout = page.getViewById("stackLayoutId");

    vm.set("slResult", 22);
    // creating new Switch and binding the value property
    const options = {
        sourceProperty: "age",
        targetProperty: "value"
    };
    const sliderComponent = new sliderModule.Slider();
    sliderComponent.bind(options, vm);
    // setting slider.value to 22
    vm.set("age", 22);

    sliderComponent.on("valueChange", (args) => {
        vm.set("slResult", args.object.value);
    });

    stackLayout.addChild(sliderComponent);

    page.bindingContext = vm;
}

exports.onPageLoaded = onPageLoaded;
export function onPageLoaded(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    const stackLayout: StackLayout = <StackLayout> page.getViewById("stackLayoutId");

    vm.set("slResult", 22);
    // creating new Switch and binding the value property
    const options = {
        sourceProperty: "age",
        targetProperty: "value"
    };
    const sliderComponent = new Slider();
    sliderComponent.bind(options, vm);
    // setting slider.value to 22
    vm.set("age", 22);

    sliderComponent.on("valueChange", (slargs) => {
        vm.set("slResult", (<Slider>slargs.object).value);
    });

    stackLayout.addChild(sliderComponent);

    page.bindingContext = vm;
}

プロパティ

名前 タイプ 説明
selectedIndex number SegmentedBarコンポーネントの選択されたインデックスを取得または設定します。
items Array<SegmentedBarItem> SegmentedBarの項目を取得または設定します。
selectedBackgroundColor Color SegmentedBarコンポーネントの選択された背景色を取得または設定します。

イベント

名前 説明
selectedIndexChanged 選択されたインデックスが変更されたときに発生します(操作またはプログラムによって)。

APIリファレンス

名前 タイプ
tns-core-modules/ui/slider Module
Slider Class

ネイティブコンポーネント

ANDROID IOS
android.widget.SeekBar UISlider
入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick