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 1072 posts 6378 karma points MVP 2x 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 1072 posts 6378 karma points MVP 2x c-trib
    May 12, 2017 @ 04:51
    Dennis Adolfi
    0

    Awesome Rasshme! Looking forward seeing it!

    Have a great day!

  • horsted 70 posts 121 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!

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies