- Version: 7.0.16
- GitHub: https://github.com/nativescript-community/ui-material-components/tree/master
- Downloads:
- Last Day: 3
- Last Week: 61
- Last Month: 1435
NativeScript Material Slider
Material Design's Slider component for NativeScript.
Contents
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.
-
stepSize optional
- An attribute to set the step size of the slider. Without this attribute, it behaves as a continuous slider.
-
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.
-
trackFillColor optional
- Sets the color of the filled track.
- Defaults to your theme's
colorPrimary
.
-
trackBackgroundColor optional
- Sets the color of the background track.
-
thumbColor optional
- Sets the color of the slider's thumb.
- Defaults to your theme's
colorPrimary
.