如何在jquery中设置圆形滑块的值？

Question

我在我的项目中使用https://github.com/princejwesley/circular-slider，它基于Ionic Framework（Cordova）和angularJS。

我的目标是拥有一个包含3个步骤的圆形滑块：低，中，高。因此，当选择0时，它应显示低，1'中'，2应高。我无法在幻灯片中调用setValue函数。这样每次用户幻灯片都会显示相应的值。

var intensity = $('#intensity').CircularSlider({
    //I used ui.find() method but its not working
    shape: "Half Circle",
    min: 0,
    max: 2,
    value: 0,
    touch: true,
    setValue: function(value) {
        console.log('inside set');
        value = value * 10;
        return value;
    },
    slide: function(ui, value) {
        console.log('inside slide');
        console.log(value + "ui" + ui);
        ui.find('.jcs-value ').setValue(0); //I used this method to set value on ui
    },
});

我在幻灯片功能中尝试了ui.find('.jcs-value').setValue，ui.setValue或intensity.setValue但它没有按预期工作。

Answer 1

我认为您可以使用jQuery roundSlider插件来实现您的要求，因为它非常灵活且易于自定义。

有关roundSlider的更多详细信息，请查看demos和documentation页。

请查看示例演示，了解您的要求jsFiddle。

输出屏幕截图：