Build reusable slider element
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.
-
slider.jpg
5.85 KB
-
Brian R Zaik- Tag set to javascript, slider, v2
-
Brian MichalskiI 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
- 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- 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.
-
snapshot.png
69.9 KB
-
Brian Michalski
- 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
- 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?
-
-
Brian Michalski
- State changed from open to resolved
(from [d04901446fd1e2f989b96d8b134a10be9de75438]) Moving Haris' duration range element to a partial, adding to ticker form. [#103 Build reusable slider element state:resolved] http://github.com/wtg/concerto/commit/d04901446fd1e2f989b96d8b134a1...
-
Brian Michalski
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
(from [53852460a46178400903cf57efb10504988526b7]) August and Zach didn't merge very well. Cleaning up the JS a bit. [#103 Build reusable slider element] https://github.com/wtg/concerto/commit/53852460a46178400903cf57efb1...
-
Brian Michalski
(from [26e4a29199bf20dec1f7fd2228afc4e2a70ea830]) show errors before content cell. closes #103 Build reusable slider element 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.