wunderfisch
63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { StyleSheet, View } from 'react-native'
|
|
import Slider from '@ptomasroos/react-native-multi-slider'
|
|
|
|
import SliderLabel from './slider-label'
|
|
|
|
import { scaleObservable } from '../../../local-storage'
|
|
import { Colors, Sizes } from '../../../styles'
|
|
|
|
import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
|
|
|
|
const DisabledTemperatureSlider = () => {
|
|
const savedValue = scaleObservable.value
|
|
const minTemperature = savedValue.min
|
|
const maxTemperature = savedValue.max
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Slider
|
|
customLabel={SliderLabel}
|
|
enableLabel={true}
|
|
markerStyle={styles.marker}
|
|
markerOffsetY={Sizes.tiny}
|
|
max={TEMP_MAX}
|
|
min={TEMP_MIN}
|
|
selectedStyle={styles.sliderAccentBackground}
|
|
step={TEMP_SLIDER_STEP}
|
|
trackStyle={styles.slider}
|
|
unselectedStyle={styles.sliderBackground}
|
|
values={[minTemperature, maxTemperature]}
|
|
enabledOne={false}
|
|
enabledTwo={false}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default DisabledTemperatureSlider
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
paddingTop: Sizes.base,
|
|
},
|
|
marker: {
|
|
backgroundColor: Colors.grey,
|
|
borderRadius: 50,
|
|
elevation: 4,
|
|
height: Sizes.subtitle,
|
|
width: Sizes.subtitle,
|
|
},
|
|
slider: {
|
|
borderRadius: 25,
|
|
height: Sizes.small,
|
|
},
|
|
sliderAccentBackground: {
|
|
backgroundColor: Colors.grey,
|
|
},
|
|
sliderBackground: {
|
|
backgroundColor: Colors.greyLight,
|
|
},
|
|
})
|