rubentd / radios-to-slider Goto Github PK

View Code? Open in Web Editor NEW

96.0 96.0 26.0 79 KB

jquery plugin to create a slider using a list of radio buttons

License: MIT License

CSS 21.66% HTML 28.39% JavaScript 49.95%

radios-to-slider's People

Contributors

Stargazers

Watchers

radios-to-slider's Issues

radios.setDisable is not a function

I tried to use the example. I see an error when I debug. radios.setDisable is not a function. can you show a working example - the below doesn't seem to work.

Also, when I have multiple groups of radios, say radios1, radio2, I want to invoke a function using "onSelect" so that I can get the value of that selected radio group. Can you give a working example. Appreciate your help. Thanks.

$(document).ready(function(){
        var radios = $("#radios").radiosToSlider();

        // Disable input
        radios.setDisable();

        // Enable input
        radios.setEnable();

        // Retrieve value
        radios.getValue();
    });

Size values option

@rubentd This is awesome! but I need to make them smaller (thinner), I notices that if I change the container div size it does not adapt very well ( setting the fitContainer property to true or false) and I saw a size property initialized by default to "medium" I tried "small" and "large" and none of them work. so what are the values or how can I reduce the size of it. TY

Fix fitContainer

radios-to-slider/js/jquery.radios-to-slider.js

Line 36 in dea6f6e

$(window).on('resize orientationChanged', function() {

$(window).on('resize orientationChanged click', function() {

Vertical radios to slider

At first thanks for this amazing plugin.

I just wanted to know if there's any simple way to transform slider vertically (with js). I guess for you that will be easier and faster and will increase the usage of this cool plugin. Any help? Thanks in advance.

Mixing multiple sliders with different levels doesn't work

I created 3 different sets of radio slider on the same back two with 3 levels and one with 4.
The sliders got confused because think each slider added to the page defines the KNOB_MARGIN variable which only gets set once per slider in the fitContainer function.
I managed to fix this for myself by calling the fitContainer function each time in the setSlider function.

Resizing slider and knob

Thanks for this great script. I'm having trouble figuring out the correlation between the KNOB_WIDTH, KNOB_MARGIN and the various CSS rules that style things. I'd like to increase the size of the slider, and while the new auto-width feature works smashingly, adjusting the height and knob size is a bit tedious. Can you offer any insight into how to adjust these various variables to accomplish additional customization?

Multiple radio groups issue

Hi there,

I have multiple radio groups in my form and when I try to call radiosToSlider() on more than one div - I have issues.

Here is my form..

                     `<form class="form-horizontal" enctype="multipart/form-data">
        <div class="form-group">
            <label for="firstName" class="control-label col-sm-2">Your Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="firstName" id="firstName">
            </div>
        </div>

        <div class="form-group">
            <label for="companyName" class="control-label col-sm-2">Company Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="companyName" id="companyName">
            </div>
        </div>

        <!--slider -->
        <div class="form-group">
            <label for="radios1" class="control-label col-sm-2">How Many Stores Do You Operate?</label>
            <div class="col-sm-10">

                <div id="radios1">

                    <input id="one" name="storesOperated" value="one" type="radio">
                    <label for="one">1</label>

                    <input id="twofive" name="storesOperated" value="twofive" type="radio">
                    <label for="twofive">2-5</label>

                    <input id="fiveten" name="storesOperated" value="fiveten" type="radio">
                    <label for="fiveten">5-10</label>

                    <input id="tenplus" name="storesOperated" value="tenplus" type="radio">
                    <label for="tenplus">10+</label>

                </div>
            </div>
        </div>

        <!--<div class="form-group">-->
        <!--<label for="website" class="control-label col-sm-2">Website URL</label>-->
        <!--<div class="col-sm-10">-->
        <!--<input type="text" class="form-control" name="website" id="website">-->
        <!--</div>-->
        <!--</div>-->

        <div class="form-group">
            <label for="email" class="control-label col-sm-2">Email</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="email" id="email">
            </div>
        </div>

        <div class="form-group">
            <label for="phone" class="control-label col-sm-2">Phone</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="phone" id="phone">
            </div>
        </div>

        <div class="form-group">
            <label for="reachTime" class="control-label col-sm-2">Best Time to Reach You</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="reachTime" id="reachTime">
                <!-- todo: make date picker -->
            </div>
        </div>

        <!-- size cups interested in. -->
        <div class="form-group">
            <label for="radios2" class="control-label col-sm-2">What Size Cups Are of Interest?</label>
            <div class="col-sm-10">

                <div id="radios2">
                    <input id="2oz" name="cupsInterest" value="2oz" type="radio">
                    <label for="2oz">2oz</label>

                    <input id="4oz" name="cupsInterest" value="4oz" type="radio">
                    <label for="4oz">4oz</label>

                    <input id="5oz" name="cupsInterest" value="5oz" type="radio">
                    <label for="5oz">5oz</label>

                    <input id="6oz" name="cupsInterest" value="6oz" type="radio">
                    <label for="6oz">6oz</label>

                    <input id="8oz" name="cupsInterest" value="8oz" type="radio">
                    <label for="8oz">8oz</label>

                    <input id="9oz" name="cupsInterest" value="9oz" type="radio">
                    <label for="9oz">9oz</label>

                    <input id="10oz" name="cupsInterest" value="10oz" type="radio">
                    <label for="10oz">10oz</label>

                    <input id="12oz" name="cupsInterest" value="12oz" type="radio">
                    <label for="12oz">12oz</label>

                    <input id="16oz" name="cupsInterest" value="16oz" type="radio">
                    <label for="16oz">16oz</label>

                    <input id="20oz" name="cupsInterest" value="20oz" type="radio">
                    <label for="20oz">20oz</label>

                    <input id="24oz" name="cupsInterest" value="24oz" type="radio">
                    <label for="24oz">24oz</label>

                    <input id="32oz" name="cupsInterest" value="32oz" type="radio">
                    <label for="32oz">32oz</label>

                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="cupType" class="control-label col-sm-2">What Type of Cups Are of Interest?</label>
            <div class="col-sm-10">
                <select name="cupType" id="cupType" class="form-control">
                    <option value="paperHot">Paper Hot</option>
                    <option value="paperCold">Paper Cold</option>
                    <option value="containerHot">Container - Hot</option>
                    <option value="containerCold">Container - Cold</option>
                    <option value="clearPlasticPET">Clear Plastic PET</option>
                    <option value="clearPlasticPP">Clear Plastic PP</option>
                    <option value="lids">Lids</option>
                    <option value="iceCreamPaperLid">Ice Cream-Paper Lid</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="annualUsage" class="control-label col-sm-2">Annual Usage?</label>
            <div class="col-sm-10">
                <select name="annualUsage" id="annualUsage" class="form-control">
                    <option value="1000">1,000</option>
                    <option value="5000">5,000</option>
                    <option value="10000">10,000</option>
                    <option value="30000">30,000</option>
                    <option value="100000">100,000+</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="expectedDelivery" class="control-label col-sm-2">Expected Delivery Date</label>
            <div class="col-sm-10">
                <select name="expectedDelivery" id="expectedDelivery" class="form-control">
                    <option value="rush">Rush</option>
                    <option value="10days">10 days</option>
                    <option value="30days">30 days</option>
                    <option value="65days">65 days</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="uploadLogo" class="control-label col-sm-2">Upload Logo</label>
            <div class="col-sm-10">
                <input type="file" class="form-control" name="uploadLogo" id="uploadLogo">
                <!-- todo: make date picker -->
            </div>
        </div>

    </form>`

Here is me calling two groups..

$(document).ready( function () {

$('#radios1').radiosToSlider({
});

$('#radios2').radiosToSlider({
});

});

Thanks!

Label margins

Can't seem to find a way to add margins or padding to the labels. This works really great for creating sliders with small labels but I would like to have "dynamic" spacing after the radio between it and the next element. I can set margin-bottom in .radios-to-slider to add absolute margin after the div of the radio itself but this starts at the bottom of the slider and not the bottom of the label so long multi-line labels overlap the next element. If I increase the margin-bottom for the radio div then I've got huge gaps between sliders with shorter labels. I've tried adding a margin to the .slider-label and .radios-to-slider.medium .slider-label and changing to display: block but it has no effect.

onSelect only works for input

Using the onSelect option only works for input click. If you click a label no function is triggered.

As a way around this I bound a click event separately to just the label.

It's worth noting because of the nature of labels and their "for" attribute, click events on the entire wrapping div cause the label to double (bubble) their calls. The only way around this for me is to separate the two as listed above.

Select event

Hello, i cant get it to work properly. Its building the layout and it doest show any errors on console, but whenever i try to select a value there's no action whatsoever. it seems there's no listener to click events. is that the case? i have to detect it manually? I'm not sure because the demo code in your website works properly just with the constructor call.

I'm also loading jquery.validate and jquery.steps plugins. (not sure if that's causing the error)

EDIT-----------------------------------------------------------------------------------
It seems you have forgotten to document that is needed to set a unique id for every radio input so that the plugin can detect the selected element correctly. After some tweaking in the source i've got it working properly. Please fix your demos so that future users dont have the same problem.

React equivalent or adaptation

Hi!

I was wondering if someone has used this library within a React app or if someone knows about an existing React component that might do the same thing.

Looking forward to hearing from any of you!

Thanks


                        <div id="radios">

                                <label>
                                <input type="radio" value="0" name="severity"> Very Minor
                                </label>

                                <label>
                                <input type="radio" value="1" name="severity"> Minor
                                </label>

                                <label>
                                <input type="radio" value="2" name="severity"> Moderate
                                </label>

                                <label>
                                <input type="radio" value="3" name="severity"> Serious
                                </label>

                                <label>
                                <input type="radio" value="4" name="severity"> Very Serious
                                </label>

                        </div>

Load as CommonJS module

Any plans to support loading as a CommonJS module (via Browserify, Webpack, etc)?

Usage would be like:

var RadiosToSlider = require('radios-to-slider');
var slider = new RadiosToSlider();

rubentd / radios-to-slider Goto Github PK

radios-to-slider's People

Contributors

Stargazers

Watchers

Forkers

radios-to-slider's Issues

Recommend Projects

Recommend Topics

Recommend Org