Build reusable slider element
Reported by Brian R Zaik | August 16th, 2010 @ 02:07 PM
For duration and perhaps other numerical parameters within specific ranges, we need to build a javascript slider. Luckily, jQuery UI has a slider construct (http://docs.jquery.com/UI/Slider) that should work well for this. However, we need to modify it somewhat:
-
The slider itself needs to handle displayed minimum and maximum values on the left and right sides of the actual slider bar.
-
The middle handle ideally would contain a label that would adjust as the handle is moved to show the slider's selected value. This handle would be styled similarly to the blue action buttons (CSS3 and a background image).
I've attached a screenshot from the Add Content L2 mockup that shows what this should look like.
Comments and changes to this ticket
-
Brian R Zaik August 16th, 2010 @ 02:09 PM
- Tag set to javascript, slider, v2
-
Brian Michalski August 16th, 2010 @ 06:45 PM
I also found this cool slider as part of the Flowplayer tools (http://flowplayer.org/tools/rangeinput/index.html) that integrates nicely with the input type=range element which has built-in markup for min and max attributes.
I don't know if we want to be including tons of different JS libraries, but I'm sure we could come up with a cool way to include relavent ones on a per-page basis.
If we go with the jQuery slider, it would be really neat to mark it up from an input type=range element, grabbing the min and max values with attr selectors.
-
Brian R Zaik August 16th, 2010 @ 06:57 PM
- State changed from new to open
That one looks pretty interesting, but I'm wondering how much work it might take to modify it for basic things like putting the selection within the handle of the slider and such. I'm willing to give it a shot.
The HTML 5 business sounds like it could work out really well. I agree that we should try to use type=range if possible.
-
Haris Khan September 24th, 2010 @ 05:17 PM
- State changed from open to resolved
I've implemented this functionality. In the process of making it a partial.I've attached a screen shot.
-
Brian Michalski September 26th, 2010 @ 03:12 PM
- State changed from resolved to open
Don't resolve a ticket it until it's resolved... I think you need to clean up the HTML you're using (i.e. the element is still named "test").
-
Haris Khan October 23rd, 2010 @ 02:49 AM
- State changed from open to resolved
Made further progress, it's done and committed. was curious on what everyone thinks though. Does this need to be a partial? I dont think it makes sense to because we'd need to specify the min and max values in the partial. I think it makes more sense just to reuse the code whenever needed and honestly it's really simple code.
<%= form.range_field :duration, {:min =>"4", :max=>"12", :value=>"8", :class=>"inputrange"} %>
Does the trick, what does everyone think?
-
Haris Khan October 23rd, 2010 @ 02:49 AM
- State changed from resolved to open
resolved by mistake haha oops
-
Brian Michalski October 23rd, 2010 @ 03:32 PM
- State changed from open to resolved
(from [d04901446fd1e2f989b96d8b134a10be9de75438]) Moving Haris' duration range element to a partial, adding to ticker form. [#103 state:resolved] http://github.com/wtg/concerto/commit/d04901446fd1e2f989b96d8b134a1...
-
Brian Michalski October 23rd, 2010 @ 03:38 PM
I agree, typing the HTML doesn't add in too much additional overhead but for the reusable content form elements they need to be as portable as possible.
The thought is that my magical iframe content plugin will want to have a content creation form that looks and acts consistent with all the other forms in the system. I, as the plugin creator, don't want to be responsible for maintaining the duration, start_date, or feed picker elements... just what makes my content form unique. It wouldn't be too hard for us to support a consistently named HTML element (like duration) but it has additional markup like the left and right seconds that need to be shown and formatted correctly.
-
Brian Michalski April 13th, 2011 @ 02:14 AM
(from [53852460a46178400903cf57efb10504988526b7]) August and Zach didn't merge very well. Cleaning up the JS a bit. [#103] https://github.com/wtg/concerto/commit/53852460a46178400903cf57efb1...
-
Brian Michalski June 8th, 2012 @ 11:36 PM
(from [26e4a29199bf20dec1f7fd2228afc4e2a70ea830]) show errors before content cell. closes #103 https://github.com/concerto/concerto/commit/26e4a29199bf20dec1f7fd2...
Please Sign in or create a free account to add a new ticket.
With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.
Create your profile
Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป
Concerto is an open source digital signage system that makes it easy to engage a large community of people with graphical and text-based announcements, bulletins, and other messages... but enough about us, you came here to get involved.
<br />
If you think you've <b>found a bug in Concerto</b>, please click 'Create new ticket' and let us know about it.
<br />
Looking to peek at our source code? Head to <a href="https://github.com/concerto/concerto_v1">https://github.com/concerto/concerto_v1</a> (Concerto version 1) or <a href="https://github.com/concerto/concerto">https://github.com/concerto/concerto</a> (Concerto version 2).
<br />
Our getting started guide is available here: <a href="https://github.com/concerto/concerto/wiki/Getting-Involved">https://github.com/concerto/concerto/wiki/Getting-Involved</a>.
People watching this ticket
Attachments
Tags
Referenced by
- 103 Build reusable slider element (from [53852460a46178400903cf57efb10504988526b7]) August ...
- 103 Build reusable slider element (from [d04901446fd1e2f989b96d8b134a10be9de75438]) Moving ...