@nativescript-community/ui-material-slider

Material Design Sliders allow users to make selections from a range of values.

Usage no npm install needed!

<script type="module">
  import nativescriptCommunityUiMaterialSlider from 'https://cdn.skypack.dev/@nativescript-community/ui-material-slider';
</script>

README

NativeScript Material Slider

Material Design's Slider component for NativeScript.

npm npm

Contents

  1. Installation
  2. Changelog
  3. FAQ
  4. Usage
  5. API

Installation

:warning: Warning :warning:

From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

For NativeScript 7.0+

  • tns plugin add @nativescript-community/ui-material-slider

For NativeScript 6.x

  • tns plugin add nativescript-material-slider

If using tns-core-modules

  • tns plugin add nativescript-material-slider@2.5.4

Be sure to run a new build after adding plugins to avoid any issues.

Changelog

FAQ

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-slider" on the Page element.

XML

<Page xmlns:mds="@nativescript-community/ui-material-slider">
    <StackLayout horizontalAlignment="center">
        <mds:Slider value="50" minValue="0" maxValue="100" />
   </StackLayout>
</Page>

CSS

mdslider {
    ripple-color: blue;
    elevation: 4;
}

NativeScript + Angular

import { NativeScriptMaterialSliderModule } from "@nativescript-community/ui-material-slider/angular";

@NgModule({
    imports: [
        NativeScriptMaterialSliderModule,
        ...
    ],
    ...
})

<MDSlider value="50" minValue="0" maxValue="100"></MDSlider>

NativeScript + Vue

import SliderPlugin from '@nativescript-community/ui-material-slider/vue';

Vue.use(SliderPlugin);

<MDSlider value="50" minValue="0" maxValue="100" @valueChange="onValueChanged"/>

Or you can bind the value to some instance data using the v-model directive:

<MDSlider v-model="value" minValue="0" maxValue="100"/>

API

Attributes

Inherite from NativeScript Slider so it already has all the same attributes.

  • elevation optional

An attribute to set the elevation of the slider. This will increase the 'drop-shadow' of the slider.

  • rippleColor optional

An attribute to set the ripple color of the slider.