CMS: Adding and Setting Up a Slider Input Element

5 min read
Add a slider input element to give visitors a way to select from a range of numbers and submit their selection to your collection.  
Before you begin:
Important:
This element is not available in Editor X.

Step 1 | Add and set up the slider

After adding the slider to your page, customize the settings, layout and design of this input element. 
Wix Editor
Studio Editor
  1. Click Add Elements on the left side of the Editor.
  2. Click Input.
  3. Click Slider.
  4. Click and drag the slider element of your choice onto the page. 
  5. Click Settings on the slider element.
  6. Enter the Field title that will display at the top of the slider.  
  7. Choose the Slider type:
    • Continuous: Visitors can select any value within the range you define.
    • Stepped: Visitors can select specific values from a range you define. Select an option under Set steps by:
      • Step Value: Enter the value of each step. The step value is divided by the value range you set below. 
      • Number of steps: Enter the number of steps that will appear in the slider. 
  8. Under Value range, choose the minimum and maximum value for your slider and what value you want to be selected by default. 
  9. (Optional) Click the Read only checkbox to restrict the slider from being used to write content to the collection. This is helpful if you're using the element to display content rather than submit it.
  10. Click the Layout icon  to edit additional settings. Set the spacing, handle appearance, steps layout, value label, prefixes and suffixes. 
  11. Click the Design icon  to choose a preset design. Then click Customize Design to adjust the design further. 

Step 2 | Connect the slider to the CMS

Connect the slider to a dataset that connects to the collection where the submissions will be stored. You can connect to an existing number field type or create a new one in your collection. 
Wix Editor
Studio Editor
  1. In your Editor, click the slider element. 
  2. Click the Connect to CMS icon  .
  3. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
  4. Click the Selected value connects to drop-down and choose the number field that the slider submits to.
    Tip: Select Add new field to add a new collection field for storing the submissions.

Next, make sure to:

Did this help?

|