How to use slider component in famo.us?

Question

My application needs draggable slider having range changing on button drag(like jqueryui range slider). In famous.js if we check, slider component is defined but in documentation the use is not described. Anyone tell how to use it?

Answer 1

I have used the Draggable Famous modifier.

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

As of version 0.3.5 of Famo.us there is not a Range Slider.

The Slider in Famo.us is only a simple slider using the range: [start, end]. You can set values from start to end.

In my opinion, the Slider in Famo.us is more of a progress bar.

Snippet example: Slider(green) with a pull button (blue)

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']);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>