I'm trying to make colored selection region when using PrimeFaces slider component. So what i'm trying to do is, when user set slider value to something, selected value is colored from 0 to chosen value (look at image).
I know that PF are using jQuery ui and we can make this happen in jQuery like $("#slider").slider({range: "min"}); and then define background color like .ui-slider-range{background: green;}.
How can i manage this whith PF component slider? is this even possible? and what's the best way to accomplish this?
Thanks.
Without using javascript you can try to set the slider range attribute to true to display the two handles and than hide the first one via css.
You can try:
<p:slider range="true" for="zeroValue,sliderValue" styleClass="your-style-class"/>
<h:inputHidden id="zeroValue" value="0"/>
<h:inputHidden id="sliderValue"/>
css
.your-style-class span:nth-of-type(1) {
display: none;
}
Related
Originally, I had a text input setup with a ng-model attribute, so that when changing its value, it would trigger something else on the page that was utilizing that model attribute. I have replaced that text input with a jQuery UI slider, and am curious what the correct or "angular" way to interact with this element so that the slider's change event / function can delegate directly to angular and accomplish the same sort of thing.
Take a look at the ui-slider component of angular-ui to see a solution for your situation.
I was wondering if anyone had any advice or examples for how to extend the jQuery UI slider to make the range draggable? Basically what I want it something similar to this, but I'd like to be able to grab the gray bar and drag it to adjust the range.
There is a widget extension available here
(see Drag the Range of a UI Input Range Slider for more detail)
I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in the css. My radio buttons are named Can meet, not sure and Decline. I want my Decline radio button to have a different color than the two others when it is selected (the color red).
I'm using Jquery mobile and have customized the css for which colors I want to have on the different themes and I have changed the .ui-btn-active to .ui-btn-active-a and .ui-btn-active-b and made them with different values. I have tried to switch between the two ui-btn-active classes without no luck, and I have tried the addClass(..) and removeClass(..) without luck. I made a method in my jquery-mobile.js which look like this:
$.mobile.changeAction = function( activeBtn){
$.mobile.activeBtnClass = activeBtn;
}
where my activeBtn parameter will be a string to choose which activeBtnClass I want to have. I think the problem is that I have problems refreshing the activeBtnClass after overriding it, I have tried some refreshing methodes without no luck.
As long as the radio buttons have different colors when active I will be very thankful.
Following styles should do the trick:
.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
background-color:red;
}
Sample jsfiddle.
To style Horizontally stacked select options:
.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
background-color:red;
}
Sample jsfiddle.
Why not just create custom themes for all of the states that you might want? You can have multiple custom themes, and only use them when you'd like. I have 7 themes in my CSS, and this way you can always incorporate them later if you'd like without having to do so much custom coding.
You can just apply the theme with the data-theme="f" (or other letter swatch) element attribute.
Here's jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php. If you're just making small changes to the theme, such as an active state, just copy the theme, and make the changes and save as a new swatch. You can go from A-Z :)
Is it possible to create a small checkbox / toggle like button using JQuery Mobile?
Placing them in a field set and set class=custom sort of does what I want, but I can't find a way to stretch the set so it fills 100% of the client width.
placing individual checkboxes in a grid with data-iconpos=center also sort of does it, but checkboxes don't quite support this mode.
Ideas?
Need 7 checkboxes horizontally. no text, just check or toggle.
Yes it is possible.
Make a sprite for the checkbox.
So when the image is "checked" showed checked sprite, and if it not, show the unchecked sprite.
I'm using jquery-ui for buttons. The default theme looks great, but I'd like to apply a different background color to a few specific buttons. Is there a way I can easily add another css class to my buttons to just change the bg color of them, without changing any other properties of the button?
Thanks
Just add it to the button's HTML and when the button is created it will get all of the existing classes.