如何在famo.us中使用滑块组件？

Question

我的应用程序需要可拖动的滑块，在按钮拖动时更改范围（如jqueryui范围滑块）。在famous.js中，如果我们检查，滑块组件已定义，但在文档中没有描述使用。有谁告诉如何使用它？

Answer 1

我使用了Draggable Famous修饰符。

var Draggable = require("famous/modifiers/Draggable")
var drag = {};
drag.item = new Draggable({
        xRange: [0,210],
        yRange: [0, 0]
    })
drag.item.on('end',function(){
        var state = this._positionState.state;
        //IF THE DRAG REACHES A POINT THEN DO SOMETHING
        //IF NOT THEN SNAP BACK TO ORIGINAL POSITION
        if(state[0] >= `SOME VALUE`){
            return somFunc();
        }
        else{
            drag.item.setPosition([0,0,0],{curve:'linear',duration:100})
        }
})

Answer 2

自version 0.3.5的{​​{1}}起，没有Famo.us。

Famo.us中的Range Slider只是使用Slider的简单滑块。您可以将值从range: [start, end]设置为start。

在我看来，Famo.us中的end更像是一个进度条。

摘录示例：带滑动按钮（蓝色）的滑块（绿色）

＆＃13;

＆＃13;

Slider

＆＃13;

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var ImageSurface = require('famous/surfaces/ImageSurface');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Draggable = require('famous/modifiers/Draggable');
  var Slider = require('famous/widgets/Slider');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();

  var lower = 100;
  var upper = 400;
  var thick = 25;

  var slider = new Slider({
    size: [upper, thick],
    indicatorSize: [upper-lower, thick],
    labelSize: [upper, thick],
    range: [lower, upper],
    precision: 0,
    value: 0,
    label: '',
    fillColor: 'rgba(100, 255, 0, 1)'
  });
  slider.set((upper-lower)/2);

  var pullButton = new Draggable({
    xRange: [0, upper-lower],
    yRange: [0, 0]
  });
  pullButton.surface = new Surface({
    size: [10, 25],
    properties: { 
      backgroundColor: 'rgba(0,0,250,0.8)',
      border: '1px solid black',
      cursor: 'pointer'
    }
  });
  pullButton.on('update', function(e) {
    var pos = e.position;
    slider.set(pos[0]+lower);
  });
  pullButton.subscribe(pullButton.surface);
  pullButton.setPosition([slider.get()-lower, 0]);

  slider.on('change', function(data) {
     console.log('slider value', data.value);
  });
  
  var placeNode = new Modifier({
    origin: [0, 0],
    align: [0, 0],
    transform: Transform.translate(20, 20, 0)
  });
  var mainNode = mainContext.add(placeNode)
  
  mainNode.add(new Modifier({transform: Transform.translate(-10, thick, 0)})).add(pullButton).add(pullButton.surface);
  mainNode.add(slider);

  
});

require(['main']);

＆＃13;

＆＃13;

＆＃13;