Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • rasshme 9 posts 80 karma points
    May 10, 2017 @ 07:10
    rasshme
    0

    Umbraco forms - add slider field type

    Hi,

    I am trying to add a slider field type to Forms. Is there a way to do it ? Or is there an existing package available for Umbraco forms slider field type.

    any inputs are appreciated.

    Thanks!

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    May 11, 2017 @ 09:32
    Dennis Adolfi
    101

    Hi Rasshme.

    I haven't seen a slider fieldtype for Umbraco Forms, but it doesn't sound like it would be very difficult for you to build your own fieldtype.

    Docs: Adding a custom field type: https://our.umbraco.org/documentation/products/umbracoforms/developer/extending/adding-a-fieldtype

    You'd probably start with something like:

    using System;
    using Umbraco.Forms.Core;
    
    namespace MyFieldTypes
    {
        public class Slider : Umbraco.Forms.Core.FieldType
        {
            public Slider()
            {
                //Provider
                this.Id = new Guid("D6A2C406-CF89-11DE-B075-55B055D89593");
                this.Name = "Slider";
                this.Description = "Renders a slider input";
                this.Icon = "icon-navigation-horizontal";
                this.DataType = FieldDataType.Integer;
                this.SortOrder = 10;
            }
        }
    }
    

    Then in /App_Plugins/UmbracoForms/Backoffice/Common/FieldTypes/ add a html file called "slider.html" and use this HTML to start with:

    <input type="number" tabindex="-1" class="input-block-level" style="max-width: 400px" />
    

    Then for the rendering part you need to add a view in the /Views/Partials/Forms/FieldTypes called FieldType.Slider.cshtml. Start with this html:

    @model Umbraco.Forms.Mvc.Models.FieldViewModel
    <input type="number" name="@Model.Name" id="@Model.Id" class="text" value="@Model.Value" maxlength="500"/>
    

    This should give you this output:

    enter image description here

    You've now created your own Forms FieldType! Now you can include some CSS and probably a JS framework to render a pretty Slider. You might also need som max/min settings which you can add to your Slider.cs file.

    But this should give you a good start.

    Remember if it turns out great and could be useful to others, package it up and share with others here on our!

    Have a great day!

  • rasshme 9 posts 80 karma points
    May 11, 2017 @ 23:38
    rasshme
    1

    Thanks Dennis,

    will give it a go and share the package once ready.

    Cheers!!

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    May 12, 2017 @ 04:51
    Dennis Adolfi
    0

    Awesome Rasshme! Looking forward seeing it!

    Have a great day!

  • horsted 74 posts 136 karma points
    Apr 02, 2019 @ 08:30
    horsted
    2

    Hi Rasshme,

    Did you ever finish your package - if you did i would be very interested :-) TIA!

Please Sign in or register to post replies

Write your reply to:

Draft