Giter Club home page Giter Club logo

slider-label's Introduction

Slider with labels

Preview - slider with different markers

Description

Allows for a slider with an option for markers or labels.

Download now

Features

  • Display a slider with markers
  • Allow for varying step size
  • Allow for displaying the value

Data Format

The field value will be the last value indicated on the slider. This will be an integer for an integer field or a decimal for a decimal field.

Default SurveyCTO feature support

Feature / Property Support
Supported field type(s) integer, decimal
Default values Yes
Constraint message Uses default behavior
Required message Uses default behavior
Read only Yes (shows the current value, if present)
media:image Yes
media:audio Yes
media:video Yes

How to use

  1. Download the test form extras/sample-form from this repo and upload it to your SurveyCTO server.
  2. Download the slider-label.fieldplugin.zip file from this repo, and attach it to the test form on your SurveyCTO server.
  3. Make sure to provide the correct parameters (see below).

Parameters

The plugin can take up to 5 parameters:

  1. min - The lowest value in the range of permitted values.
  2. max - The greatest value in the range of permitted values.
  3. markers - can take three values. -none - slider will have no markers. -yes - slider will have markers at set intervals (determined by the step parameter). -labels - slider will have labels and markers.
  4. step - The step attribute is a number that specifies the granularity that the value must adhere to. The default is 1 for integer and 0.1 for decimals.
  5. display_value (optional) - use this to display the current value of the slider below the slider.

Examples usage is as follows:

custom-slider-label(min="0", max="100", markers="none")
custom-slider-label(min="0", max="100", markers="yes")
custom-slider-label(min="0", max="100", markers="labels")
custom-slider-label(min="0", max="1", markers="labels", step=0.1)
custom-slider-label(min="0", max="10", markers="labels", step=1, display_value="yes")

More resources

Sample form

You can find a form definition in this repo here: extras/sample_form. This form will help you create a sample form to test the functionality of the field plug-in.

Developer documentation

slider-label's People

Contributors

amrikcooper avatar cking0987 avatar mofya1 avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slider-label's Issues

Introducing transparency as default

Hi @mofya1, hi SurveyCTO team,

Do you think you could introduce an option such that the default display doesn't show an initial slider location? I'm afraid setting the initial location to either 0 or 50 will create anchoring issues: respondents will be more likely to pick that location (or a location close to the initial value). Here is the behavior I'd prefer

  1. The slider is empty.
  2. Respondents have to pick any location on the slider.
  3. Then, the bubble shows up at that location and can be moved around.

You may be able to do that by setting the initial bubble to transparent, and changing the transparency level once the slider has been touched. What do you think---Is this something you could add here (and to the other slider plugin)?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.