Version: latest

Slider

Lumin
iOS
Android

Description

The Slider component places a slider into your prism. Use sliders to provide a visual reference to a specific range and the current value within that range, like a volume slider. Sliders can use either icons or labels. The default slider is white and uses 100% opacity for the active part of the slider. Sliders inherit the width from a parent component, such as RectLayout. If the slider does not have a parent, it is one meter wide unless otherwise constrained. The default minimum and maximum values in the range are 0 and 1.

Example

import React from "react";
import { Text, Slider, Image, LinearLayout, View, Prism, Scene } from "magic-script-components";

export default class MyApp extends React.Component {
  state = {
    red: undefined,
    green: undefined,
    blue: undefined,
    alpha: undefined
  };

  onRedChanged = eventData => this.setState({ red: eventData.Value });
  onGreenChanged = eventData => this.setState({ green: eventData.Value });
  onBlueChanged = eventData => this.setState({ blue: eventData.Value });
  onAlphaChanged = eventData => this.setState({ alpha: eventData.Value });

  _setInitialSliderValue = (sliderProps, currentValue, initialValue) => {
    if (currentValue === undefined) {
      sliderProps.value = initialValue;
    }
    return sliderProps;
  };

  render() {
    const sliderProps = { width: 0.8, height: 0.02, min: 0, max: 1 };
    const redProps = this._setInitialSliderValue(
      { ...sliderProps },
      this.state.red,
      0.5
    );
    const greenProps = this._setInitialSliderValue(
      { ...sliderProps },
      this.state.green,
      0.5
    );
    const blueProps = this._setInitialSliderValue(
      { ...sliderProps },
      this.state.blue,
      0.5
    );
    const alphaProps = this._setInitialSliderValue(
      { ...sliderProps },
      this.state.alpha,
      0.5
    );

    const color = [
      this.state.red === undefined ? redProps.value : this.state.red,
      this.state.green === undefined ? greenProps.value : this.state.green,
      this.state.blue === undefined ? blueProps.value : this.state.blue,
      this.state.alpha === undefined ? alphaProps.value : this.state.alpha
    ];

    return (
      <Scene>
        <Prism size={[1, 1, 0.2]} >
          <View name="main-view" alignment={'center-center'}>
            <LinearLayout
              name="main-view"
              orientation="vertical"
              defaultItemAlignment="center-left"
              defaultItemPadding={[0.012, 0.012, 0.012, 0.012]}
              localPosition={[-0.45, 0.45, 0]}
            >
              <Image width={0.8} height={0.3} color={color} useFrame={true} />
              <Text textSize={0.05} textColor={[1, 0, 0, 1]} text="Red" />
              <Slider {...redProps} onSliderChanged={this.onRedChanged} />
              <Text textSize={0.05} textColor={[0, 1, 0, 1]} text="Green" />
              <Slider {...greenProps} onSliderChanged={this.onGreenChanged} />
              <Text textSize={0.05} textColor={[0, 0, 1, 1]} text="Blue" />
              <Slider {...blueProps} onSliderChanged={this.onBlueChanged} />
              <Text textSize={0.05} text="Alpha" />
              <Slider {...alphaProps} onSliderChanged={this.onAlphaChanged} />
            </LinearLayout>
          </View>
        </Prism>
      </Scene>
    );
  }
}

Common Events

Common Properties

Create Properties

Name	Type	Default Value	Required	Description
width	number	n/a	N	The width of the slider.
height	number	0	N	The height of the slider.

Element Properties

Name	Type	Default Value	Description
min	number	`0`	Sets the minimum slider value. This value is set only if it is less than the slider's maximum value. The default value is `0`.
max	number	`1`	Sets the maximum slider value. This value is set only if it is greater than the slider's minimum value. The default value is `1`.
value	number	n/a	Sets the slider value. The value will be clamped within the current minimum and maximum range.

#Description

#Example

#Common Events

#Common Properties