Slider works but not seeing min & max values at either end

[jkelleher]

Maybe I'm missing something but Slider works but not seeing min & max values at either end. Have styling on the slider showing fine and can manipulate the slider but just missing the min/max values at either end under the slider. Have added my own divs with binding to values which works but I'm pretty sure I should be seeing it by default...

[danielcrisp]

Can you see the elements in dev tools?

[jkelleher]

Daniel, not seeing the labels in my devtools, only the slider.

[danielcrisp]

Wouldn't they be inside the range-slider div... can you expand it?

[jkelleher]

Sorry about that - looks like the ngrs divs are actually there but hidden by the 'ng-hide' attribute. So the question moves to why these are hidden by default?

[danielcrisp]

Well they shouldn't be!

You can see the default setting here and it is true so they should be visible: https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js#L60

Very strange... I don't suppose you could replicate it in a plunkr/fiddle could you please?

[jkelleher]

Daniel, did that up in Plnkr and I see the labels. Trying to think what might be the problem at my end. I don't think the CSS at my end is the fault as it wouldn't be introducing the ng-hide - but where is that coming from, dunno. In my app, here's the controller:

angular.module('retro')
    .controller('EnvelopeCtrl', function($scope) {
        $scope.minEnv = 10;
        $scope.maxEnv = 15;
    });

And the html:

<div class="container">
    <div class="row">
        <div class='col-md-12'>
            <ng-include src="'app/components/navbar/navbar.html'"></ng-include>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8">
            <div class='col-md-10'>
                <label class="control-label">Desired Vacant Int Temp</label>
                <div range-slider min="10" max="20" model-min="minEnv" model-max="maxEnv" attach-handle-values="true"></div>
            </div>
        </div>
    </div>
</div>

[danielcrisp]

Sounds very strange

I added jQuery and the show-values attribute and its working fine for me...

http://plnkr.co/edit/wfLEOhsvOrPfexrFypAd?p=preview

Have you tried setting the show-values attribute to true?

Also you could inspect the directive scope in Chrome using your console or Batarang to see what the value of showValues is at runtime

[jkelleher]

show-values="true" did the trick. Thanks for chasing it down. Strange how I didn't need it in the plnkr but did in my own app. Still, happy monkey now.

[danielcrisp]

Ok glad it worked, I think it might be a hint that something isn't quite right somewhere though

[Aznbai]

hello! same issue as discribed by @jkelleher. adding show-values="true" to the <div range-slider > did the job.

it actualy worked when i downloaded your ZIP and played with it. the issue started as i installed angular-rangeslider into my project with bower.