Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/455.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 分数滑块_Javascript_Dojo_Slider - Fatal编程技术网

Javascript 分数滑块

Javascript 分数滑块,javascript,dojo,slider,Javascript,Dojo,Slider,我有一个从1到0.1的滑块。 我设置了最小值和最大值,滑块计算数字之间的间隔 但是现在我需要使用一组介于1/1,1/2。。。到1/9。e、 g.1,0.5,0.33,0.25 我怎样才能做到 <div id="slider1" data-dojo-type="dijit.form.HorizontalSlider" data-dojo-props='name:"horizontal1", onChange:function(val){ dojo.by

我有一个从1到0.1的滑块。 我设置了最小值和最大值,滑块计算数字之间的间隔

但是现在我需要使用一组介于1/1,1/2。。。到1/9。e、 g.1,0.5,0.33,0.25

我怎样才能做到

<div id="slider1" data-dojo-type="dijit.form.HorizontalSlider"
        data-dojo-props='name:"horizontal1",
            onChange:function(val){ dojo.byId("slider1input").value=dojo.number.format(val); },

            maximum:1/9,
            minimum:1/1,
            showButtons:true,
            discreteValues:9,
            intermediateChanges:true,
            style:{width:"400px"}
            '>

以下是修改后的示例:

因此,滑块接受整数,然后将它们转换为分数,请参见onChange函数

<div id='slider1'
 data-dojo-type='dijit.form.HorizontalSlider'
 data-dojo-props='name:"horizontal1",
                  onChange: function(val){ dojo.byId("slider1input").value = dojo.number.format( 1 / (10 - val) ); },
                  maximum: 9,
                  minimum: 1,
                  showButtons: true,
                  discreteValues: 9,
                  intermediateChanges: true,
                  style: {width:"400px"}'>

<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height: 1.5em; font-size: 75%; color: gray;">
    <li>1/9</li>
    <li>1/8</li>
    <li>1/7</li>
    <li>1/6</li>
    <li>1/5</li>
    <li>1/4</li>
    <li>1/3</li>
    <li>1/2</li>
    <li>1</li>
</ol>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=9 style="height:5px;"></div>