本文整理汇总了TypeScript中@ephox/alloy.Slider类的典型用法代码示例。如果您正苦于以下问题：TypeScript Slider类的具体用法？TypeScript Slider怎么用？TypeScript Slider使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了Slider类的3个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: function
const sketch = function (rawSpec) {
const spec = ValueSchema.asRawOrDie('SizeSlider', schema, rawSpec);
const isValidValue = function (valueIndex) {
return valueIndex >= 0 && valueIndex < spec.sizes.length;
};
const onChange = function (slider, thumb, valueIndex) {
if (isValidValue(valueIndex)) {
spec.onChange(valueIndex);
}
};
return Slider.sketch({
dom: {
tag: 'div',
classes: [
Styles.resolve('slider-' + spec.category + '-size-container'),
Styles.resolve('slider'),
Styles.resolve('slider-size-container') ]
},
onChange,
onDragStart (slider, thumb) {
Toggling.on(thumb);
},
onDragEnd (slider, thumb) {
Toggling.off(thumb);
},
min: 0,
max: spec.sizes.length - 1,
stepSize: 1,
getInitialValue: spec.getInitialValue,
snapToGrid: true,
sliderBehaviours: Behaviour.derive([
Receivers.orientation(Slider.refresh)
]),
components: [
Slider.parts().spectrum({
dom: UiDomFactory.dom('<div class="${prefix}-slider-size-container"></div>'),
components: [
UiDomFactory.spec('<div class="${prefix}-slider-size-line"></div>')
]
}),
Slider.parts().thumb({
dom: UiDomFactory.dom('<div class="${prefix}-slider-thumb"></div>'),
behaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('thumb-active')
})
])
})
]
});
};示例2:
const makeSlider = (label: string, onChoose: (slider: AlloyComponent, thumb: AlloyComponent, value: SliderTypes.SliderValueX) => void, min: number, value: number, max: number): Memento.MementoRecord => {
const labelPart = Slider.parts().label({
dom: {
tag: 'label',
classes: ['tox-label'],
innerHtml: providersBackstage.translate(label)
}
});
const spectrum = Slider.parts().spectrum({
dom: {
tag: 'div',
classes: ['tox-slider__rail'],
attributes: {
role: 'presentation'
}
}
});
const thumb = Slider.parts().thumb({
dom: {
tag: 'div',
classes: ['tox-slider__handle'],
attributes: {
role: 'presentation'
}
}
});
return Memento.record(Slider.sketch({
dom: {
tag: 'div',
classes: ['tox-slider'],
attributes: {
role: 'presentation'
}
},
model: {
mode: 'x',
minX: min,
maxX: max,
getInitialValue: Fun.constant({ x: Fun.constant(value) })
},
components: [
labelPart,
spectrum,
thumb
],
sliderBehaviours: Behaviour.derive([
Focusing.config({})
]),
onChoose
}));
};示例3: function
const makeSlider = function (spec) {
const getColor = function (hue) {
// Handle edges.
if (hue < 0) {
return 'black';
} else if (hue > 360) {
return 'white';
} else {
return 'hsl(' + hue + ', 100%, 50%)';
}
};
// Does not fire change intentionally.
const onInit = function (slider, thumb, value) {
const color = getColor(value);
Css.set(thumb.element(), 'background-color', color);
};
const onChange = function (slider, thumb, value) {
const color = getColor(value);
Css.set(thumb.element(), 'background-color', color);
spec.onChange(slider, thumb, color);
};
return Slider.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-slider ${prefix}-hue-slider-container"></div>'),
components: [
Slider.parts()['left-edge'](UiDomFactory.spec('<div class="${prefix}-hue-slider-black"></div>')),
Slider.parts().spectrum({
dom: UiDomFactory.dom('<div class="${prefix}-slider-gradient-container"></div>'),
components: [
UiDomFactory.spec('<div class="${prefix}-slider-gradient"></div>')
],
behaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('thumb-active')
})
])
}),
Slider.parts()['right-edge'](UiDomFactory.spec('<div class="${prefix}-hue-slider-white"></div>')),
Slider.parts().thumb({
dom: UiDomFactory.dom('<div class="${prefix}-slider-thumb"></div>'),
behaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('thumb-active')
})
])
})
],
onChange,
onDragStart (slider, thumb) {
Toggling.on(thumb);
},
onDragEnd (slider, thumb) {
Toggling.off(thumb);
},
onInit,
stepSize: 10,
min: 0,
max: 360,
getInitialValue: spec.getInitialValue,
sliderBehaviours: Behaviour.derive([
Receivers.orientation(Slider.refresh)
])
});
};