You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2018/03/21 21:26:02 UTC
Slider implementation
Hi,
In the following link [1], the recommended and more easy way to declare a
slider is with a range
I think at least for Basic the HTML implementation should be
<input type="range" min="1" max="100" value="50">
instead the current (a div with two inner buttons)
In Jewel, I'm going to experiment with input range to see if is better or
not...
Thanks
[1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
--
Carlos Rovira
http://about.me/carlosrovira
Re: Slider implementation
Posted by Carlos Rovira <ca...@apache.org>.
Singing right now!
thanks! :)
2018-03-22 16:08 GMT+01:00 Harbs <ha...@gmail.com>:
> Browserstack is great for testing on all kinds of platforms.[1] I use it
> for my company.
>
> It looks like they have free open source accounts.[2]
>
> [1]https://www.browserstack.com <https://www.browserstack.com/>
> [2]https://www.browserstack.com/open-source?ref=resources_banner <
> https://www.browserstack.com/open-source?ref=resources_banner>
> > On Mar 22, 2018, at 4:43 PM, Carlos Rovira <ca...@apache.org>
> wrote:
> >
> > My problem is that since I'm on Mac, I could try in Safari, Chrome and
> > Firefox mainly, but not in IE/Edge... if there's some way let me know
> >
> > thanks!
> >
> > 2018-03-22 13:42 GMT+01:00 Harbs <ha...@gmail.com>:
> >
> >> I’m mostly using the css and the additional functionality of
> >> rangeslider.js. I’d love to replace it with a Royale component. :-)
> >>
> >> I agree that we don’t need polyfills, but there *is* a need to deal
> >> specially with IE (and I think Edge) styling.
> >>
> >> Good luck!
> >>
> >> Harbs
> >>
> >>> On Mar 22, 2018, at 12:24 PM, Carlos Rovira <ca...@apache.org>
> >> wrote:
> >>>
> >>> Harbs,
> >>>
> >>> for what I read range slider is a polyfill to support HTML5 input range
> >>> so maybe we didn't make this as a input range due to browser support
> [1]
> >>> (it works in IE11 but not in IE10 and IE 9)
> >>>
> >>> I think if we use input range directly, should be ok. Other things to
> >> look
> >>> are if we can support our regular events and how to this
> >>>
> >>> [1] https://caniuse.com/#feat=input-range
> >>>
> >>>
> >>>
> >>> 2018-03-22 11:08 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> >>>
> >>>> Thanks Harbs, I'll check that.
> >>>>
> >>>> I still don't dig into this, but maybe the reason to make this with a
> >> div
> >>>> and two buttons was to get the events and properties we use to have in
> >>>> Flex.
> >>>>
> >>>> I'll take a look to the link you posted to know more about it
> >>>>
> >>>> thanks
> >>>>
> >>>>
> >>>>
> >>>> 2018-03-21 23:15 GMT+01:00 Harbs <ha...@gmail.com>:
> >>>>
> >>>>> Good luck.
> >>>>>
> >>>>> FWIW, I’m currently using rangeslider.js in my app.[1]
> >>>>>
> >>>>> <input type=“range”/> is probably the way to go if you can get it all
> >> to
> >>>>> work. One of the things I’m currently struggling with is making input
> >>>>> ranges work well on tablets.
> >>>>>
> >>>>> [1]http://rangeslider.js.org/ <http://rangeslider.js.org/>
> >>>>>
> >>>>>> On Mar 21, 2018, at 11:26 PM, Carlos Rovira <
> carlosrovira@apache.org>
> >>>>> wrote:
> >>>>>>
> >>>>>> Hi,
> >>>>>>
> >>>>>> In the following link [1], the recommended and more easy way to
> >> declare
> >>>>> a
> >>>>>> slider is with a range
> >>>>>>
> >>>>>> I think at least for Basic the HTML implementation should be
> >>>>>>
> >>>>>> <input type="range" min="1" max="100" value="50">
> >>>>>>
> >>>>>> instead the current (a div with two inner buttons)
> >>>>>>
> >>>>>> In Jewel, I'm going to experiment with input range to see if is
> better
> >>>>> or
> >>>>>> not...
> >>>>>>
> >>>>>> Thanks
> >>>>>>
> >>>>>> [1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
> >>>>>>
> >>>>>> --
> >>>>>> Carlos Rovira
> >>>>>> http://about.me/carlosrovira
> >>>>>
> >>>>>
> >>>>
> >>>>
> >>>> --
> >>>> Carlos Rovira
> >>>> http://about.me/carlosrovira
> >>>>
> >>>>
> >>>
> >>>
> >>> --
> >>> Carlos Rovira
> >>> http://about.me/carlosrovira
> >>
> >> --
> >> <http://about.me/carlosrovira>
> >> <http://about.me/carlosrovira>
> >> Carlos Rovira
> >> <http://about.me/carlosrovira>
> >> <http://about.me/carlosrovira>http://about.me/carlosrovira
> >>
> >>
> >>
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Slider implementation
Posted by Harbs <ha...@gmail.com>.
Browserstack is great for testing on all kinds of platforms.[1] I use it for my company.
It looks like they have free open source accounts.[2]
[1]https://www.browserstack.com <https://www.browserstack.com/>
[2]https://www.browserstack.com/open-source?ref=resources_banner <https://www.browserstack.com/open-source?ref=resources_banner>
> On Mar 22, 2018, at 4:43 PM, Carlos Rovira <ca...@apache.org> wrote:
>
> My problem is that since I'm on Mac, I could try in Safari, Chrome and
> Firefox mainly, but not in IE/Edge... if there's some way let me know
>
> thanks!
>
> 2018-03-22 13:42 GMT+01:00 Harbs <ha...@gmail.com>:
>
>> I’m mostly using the css and the additional functionality of
>> rangeslider.js. I’d love to replace it with a Royale component. :-)
>>
>> I agree that we don’t need polyfills, but there *is* a need to deal
>> specially with IE (and I think Edge) styling.
>>
>> Good luck!
>>
>> Harbs
>>
>>> On Mar 22, 2018, at 12:24 PM, Carlos Rovira <ca...@apache.org>
>> wrote:
>>>
>>> Harbs,
>>>
>>> for what I read range slider is a polyfill to support HTML5 input range
>>> so maybe we didn't make this as a input range due to browser support [1]
>>> (it works in IE11 but not in IE10 and IE 9)
>>>
>>> I think if we use input range directly, should be ok. Other things to
>> look
>>> are if we can support our regular events and how to this
>>>
>>> [1] https://caniuse.com/#feat=input-range
>>>
>>>
>>>
>>> 2018-03-22 11:08 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>>>
>>>> Thanks Harbs, I'll check that.
>>>>
>>>> I still don't dig into this, but maybe the reason to make this with a
>> div
>>>> and two buttons was to get the events and properties we use to have in
>>>> Flex.
>>>>
>>>> I'll take a look to the link you posted to know more about it
>>>>
>>>> thanks
>>>>
>>>>
>>>>
>>>> 2018-03-21 23:15 GMT+01:00 Harbs <ha...@gmail.com>:
>>>>
>>>>> Good luck.
>>>>>
>>>>> FWIW, I’m currently using rangeslider.js in my app.[1]
>>>>>
>>>>> <input type=“range”/> is probably the way to go if you can get it all
>> to
>>>>> work. One of the things I’m currently struggling with is making input
>>>>> ranges work well on tablets.
>>>>>
>>>>> [1]http://rangeslider.js.org/ <http://rangeslider.js.org/>
>>>>>
>>>>>> On Mar 21, 2018, at 11:26 PM, Carlos Rovira <ca...@apache.org>
>>>>> wrote:
>>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> In the following link [1], the recommended and more easy way to
>> declare
>>>>> a
>>>>>> slider is with a range
>>>>>>
>>>>>> I think at least for Basic the HTML implementation should be
>>>>>>
>>>>>> <input type="range" min="1" max="100" value="50">
>>>>>>
>>>>>> instead the current (a div with two inner buttons)
>>>>>>
>>>>>> In Jewel, I'm going to experiment with input range to see if is better
>>>>> or
>>>>>> not...
>>>>>>
>>>>>> Thanks
>>>>>>
>>>>>> [1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
>>>>>>
>>>>>> --
>>>>>> Carlos Rovira
>>>>>> http://about.me/carlosrovira
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Carlos Rovira
>>>> http://about.me/carlosrovira
>>>>
>>>>
>>>
>>>
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>>
>> --
>> <http://about.me/carlosrovira>
>> <http://about.me/carlosrovira>
>> Carlos Rovira
>> <http://about.me/carlosrovira>
>> <http://about.me/carlosrovira>http://about.me/carlosrovira
>>
>>
>>
Re: Slider implementation
Posted by Carlos Rovira <ca...@apache.org>.
My problem is that since I'm on Mac, I could try in Safari, Chrome and
Firefox mainly, but not in IE/Edge... if there's some way let me know
thanks!
2018-03-22 13:42 GMT+01:00 Harbs <ha...@gmail.com>:
> I’m mostly using the css and the additional functionality of
> rangeslider.js. I’d love to replace it with a Royale component. :-)
>
> I agree that we don’t need polyfills, but there *is* a need to deal
> specially with IE (and I think Edge) styling.
>
> Good luck!
>
> Harbs
>
> > On Mar 22, 2018, at 12:24 PM, Carlos Rovira <ca...@apache.org>
> wrote:
> >
> > Harbs,
> >
> > for what I read range slider is a polyfill to support HTML5 input range
> > so maybe we didn't make this as a input range due to browser support [1]
> > (it works in IE11 but not in IE10 and IE 9)
> >
> > I think if we use input range directly, should be ok. Other things to
> look
> > are if we can support our regular events and how to this
> >
> > [1] https://caniuse.com/#feat=input-range
> >
> >
> >
> > 2018-03-22 11:08 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> >
> >> Thanks Harbs, I'll check that.
> >>
> >> I still don't dig into this, but maybe the reason to make this with a
> div
> >> and two buttons was to get the events and properties we use to have in
> >> Flex.
> >>
> >> I'll take a look to the link you posted to know more about it
> >>
> >> thanks
> >>
> >>
> >>
> >> 2018-03-21 23:15 GMT+01:00 Harbs <ha...@gmail.com>:
> >>
> >>> Good luck.
> >>>
> >>> FWIW, I’m currently using rangeslider.js in my app.[1]
> >>>
> >>> <input type=“range”/> is probably the way to go if you can get it all
> to
> >>> work. One of the things I’m currently struggling with is making input
> >>> ranges work well on tablets.
> >>>
> >>> [1]http://rangeslider.js.org/ <http://rangeslider.js.org/>
> >>>
> >>>> On Mar 21, 2018, at 11:26 PM, Carlos Rovira <ca...@apache.org>
> >>> wrote:
> >>>>
> >>>> Hi,
> >>>>
> >>>> In the following link [1], the recommended and more easy way to
> declare
> >>> a
> >>>> slider is with a range
> >>>>
> >>>> I think at least for Basic the HTML implementation should be
> >>>>
> >>>> <input type="range" min="1" max="100" value="50">
> >>>>
> >>>> instead the current (a div with two inner buttons)
> >>>>
> >>>> In Jewel, I'm going to experiment with input range to see if is better
> >>> or
> >>>> not...
> >>>>
> >>>> Thanks
> >>>>
> >>>> [1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
> >>>>
> >>>> --
> >>>> Carlos Rovira
> >>>> http://about.me/carlosrovira
> >>>
> >>>
> >>
> >>
> >> --
> >> Carlos Rovira
> >> http://about.me/carlosrovira
> >>
> >>
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
>
> --
> <http://about.me/carlosrovira>
> <http://about.me/carlosrovira>
> Carlos Rovira
> <http://about.me/carlosrovira>
> <http://about.me/carlosrovira>http://about.me/carlosrovira
>
>
>
Re: Slider implementation
Posted by Harbs <ha...@gmail.com>.
I’m mostly using the css and the additional functionality of rangeslider.js. I’d love to replace it with a Royale component. :-)
I agree that we don’t need polyfills, but there *is* a need to deal specially with IE (and I think Edge) styling.
Good luck!
Harbs
> On Mar 22, 2018, at 12:24 PM, Carlos Rovira <ca...@apache.org> wrote:
>
> Harbs,
>
> for what I read range slider is a polyfill to support HTML5 input range
> so maybe we didn't make this as a input range due to browser support [1]
> (it works in IE11 but not in IE10 and IE 9)
>
> I think if we use input range directly, should be ok. Other things to look
> are if we can support our regular events and how to this
>
> [1] https://caniuse.com/#feat=input-range
>
>
>
> 2018-03-22 11:08 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>
>> Thanks Harbs, I'll check that.
>>
>> I still don't dig into this, but maybe the reason to make this with a div
>> and two buttons was to get the events and properties we use to have in
>> Flex.
>>
>> I'll take a look to the link you posted to know more about it
>>
>> thanks
>>
>>
>>
>> 2018-03-21 23:15 GMT+01:00 Harbs <ha...@gmail.com>:
>>
>>> Good luck.
>>>
>>> FWIW, I’m currently using rangeslider.js in my app.[1]
>>>
>>> <input type=“range”/> is probably the way to go if you can get it all to
>>> work. One of the things I’m currently struggling with is making input
>>> ranges work well on tablets.
>>>
>>> [1]http://rangeslider.js.org/ <http://rangeslider.js.org/>
>>>
>>>> On Mar 21, 2018, at 11:26 PM, Carlos Rovira <ca...@apache.org>
>>> wrote:
>>>>
>>>> Hi,
>>>>
>>>> In the following link [1], the recommended and more easy way to declare
>>> a
>>>> slider is with a range
>>>>
>>>> I think at least for Basic the HTML implementation should be
>>>>
>>>> <input type="range" min="1" max="100" value="50">
>>>>
>>>> instead the current (a div with two inner buttons)
>>>>
>>>> In Jewel, I'm going to experiment with input range to see if is better
>>> or
>>>> not...
>>>>
>>>> Thanks
>>>>
>>>> [1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
>>>>
>>>> --
>>>> Carlos Rovira
>>>> http://about.me/carlosrovira
>>>
>>>
>>
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
Re: Slider implementation
Posted by Carlos Rovira <ca...@apache.org>.
Harbs,
for what I read range slider is a polyfill to support HTML5 input range
so maybe we didn't make this as a input range due to browser support [1]
(it works in IE11 but not in IE10 and IE 9)
I think if we use input range directly, should be ok. Other things to look
are if we can support our regular events and how to this
[1] https://caniuse.com/#feat=input-range
2018-03-22 11:08 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> Thanks Harbs, I'll check that.
>
> I still don't dig into this, but maybe the reason to make this with a div
> and two buttons was to get the events and properties we use to have in
> Flex.
>
> I'll take a look to the link you posted to know more about it
>
> thanks
>
>
>
> 2018-03-21 23:15 GMT+01:00 Harbs <ha...@gmail.com>:
>
>> Good luck.
>>
>> FWIW, I’m currently using rangeslider.js in my app.[1]
>>
>> <input type=“range”/> is probably the way to go if you can get it all to
>> work. One of the things I’m currently struggling with is making input
>> ranges work well on tablets.
>>
>> [1]http://rangeslider.js.org/ <http://rangeslider.js.org/>
>>
>> > On Mar 21, 2018, at 11:26 PM, Carlos Rovira <ca...@apache.org>
>> wrote:
>> >
>> > Hi,
>> >
>> > In the following link [1], the recommended and more easy way to declare
>> a
>> > slider is with a range
>> >
>> > I think at least for Basic the HTML implementation should be
>> >
>> > <input type="range" min="1" max="100" value="50">
>> >
>> > instead the current (a div with two inner buttons)
>> >
>> > In Jewel, I'm going to experiment with input range to see if is better
>> or
>> > not...
>> >
>> > Thanks
>> >
>> > [1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
>> >
>> > --
>> > Carlos Rovira
>> > http://about.me/carlosrovira
>>
>>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Slider implementation
Posted by Carlos Rovira <ca...@apache.org>.
Thanks Harbs, I'll check that.
I still don't dig into this, but maybe the reason to make this with a div
and two buttons was to get the events and properties we use to have in
Flex.
I'll take a look to the link you posted to know more about it
thanks
2018-03-21 23:15 GMT+01:00 Harbs <ha...@gmail.com>:
> Good luck.
>
> FWIW, I’m currently using rangeslider.js in my app.[1]
>
> <input type=“range”/> is probably the way to go if you can get it all to
> work. One of the things I’m currently struggling with is making input
> ranges work well on tablets.
>
> [1]http://rangeslider.js.org/ <http://rangeslider.js.org/>
>
> > On Mar 21, 2018, at 11:26 PM, Carlos Rovira <ca...@apache.org>
> wrote:
> >
> > Hi,
> >
> > In the following link [1], the recommended and more easy way to declare a
> > slider is with a range
> >
> > I think at least for Basic the HTML implementation should be
> >
> > <input type="range" min="1" max="100" value="50">
> >
> > instead the current (a div with two inner buttons)
> >
> > In Jewel, I'm going to experiment with input range to see if is better or
> > not...
> >
> > Thanks
> >
> > [1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Slider implementation
Posted by Harbs <ha...@gmail.com>.
Good luck.
FWIW, I’m currently using rangeslider.js in my app.[1]
<input type=“range”/> is probably the way to go if you can get it all to work. One of the things I’m currently struggling with is making input ranges work well on tablets.
[1]http://rangeslider.js.org/ <http://rangeslider.js.org/>
> On Mar 21, 2018, at 11:26 PM, Carlos Rovira <ca...@apache.org> wrote:
>
> Hi,
>
> In the following link [1], the recommended and more easy way to declare a
> slider is with a range
>
> I think at least for Basic the HTML implementation should be
>
> <input type="range" min="1" max="100" value="50">
>
> instead the current (a div with two inner buttons)
>
> In Jewel, I'm going to experiment with input range to see if is better or
> not...
>
> Thanks
>
> [1] https://www.w3schools.com/howto/howto_js_rangeslider.asp
>
> --
> Carlos Rovira
> http://about.me/carlosrovira