There are cases that your woocommerce price filter will just NOT work. Whatever you try it just doesnt work. I dont know why but there is not much info out there for this specific problem. When the price filter doesnt work, woocommerce just shows you two input fields as an alternative.

Most common reason for this to happen is some javascript conflict. There are several things you can do now.

1. Disable all the plugins one by one to find out which plugin did the dirty job!

2. Search around and try any solution or fix that you can get your hands on..

3. Turn on your debugging to see the exact error..

Here are some things i found around that  might help. Thankfully for me was a plugin conflict, which i solved.

1. Check if you are using a minifier of any short. If you do try to exclude the file wc-price-slider.js and that might just do the trick.

2. I read something for an outdated mod_security server plugin. You can dind more info on that on the source link below. (“jQuery.cookie.js/jQuery.cookie.min.js scripts fail to load”)

source

3. Try finding the following css lines in wordpress css and put it inside your themes css, just in case something was altered/lost.

.price_slider{ 
    margin-bottom: 1em;
}
.price_slider_amount {
    text-align: right;
    line-height: 2.4em;
    font-size: 0.8751em;
}
.price_slider_amount .button {
    font-size:1.15em;
}
.price_slider_amount .button {
    float: left;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 0.9em;
    height: 0.9em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    background: #e7e7e7;
    background: -webkit-gradient(linear,left top,left bottom,from(#FEFEFE),to(#e7e7e7));
    background: -webkit-linear-gradient(#FEFEFE,#e7e7e7);
    background: -moz-linear-gradient(center top,#FEFEFE 0%,#e7e7e7 100%);
    background: -moz-gradient(center top,#FEFEFE 0%,#e7e7e7 100%);
    outline: none;
    top: -.3em;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}
.ui-slider .ui-slider-handle:last-child {
    margin-left: -1em;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size:.7em;
    display: block;
    border: 0;
    background: none repeat scroll 0 0 #FF6B6B;
    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -webkit-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -moz-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}
.price_slider_wrapper .ui-widget-content {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    background: #1e1e1e;
    background: -webkit-gradient(linear,left top,left bottom,from(#1e1e1e),to(#6a6a6a));
    background: -webkit-linear-gradient(#1e1e1e,#6a6a6a);
    background: -moz-linear-gradient(center top,#1e1e1e 0%,#6a6a6a 100%);
    background: -moz-gradient(center top,#1e1e1e 0%,#6a6a6a 100%);
}
.ui-slider-horizontal {
    height:.5em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: -1px;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: -1px;
}

4. Try adding the following code somehere in your widget..

register_sidebar(array(
‘name’=>’Sidebar Widgets’,
‘before_widget’ => ‘ div id=”%1$s” class=”widgetSidebar %2$s” ‘,
‘after_widget’ => ‘ /div ‘,
‘before_title’ => ‘ h4 ‘,
‘after_title’ => ‘ /h4 ‘,
));

source

Here you can find the php widget file from the woocommerce on github if it is needed.

class-wc-widget-price-filter.php – woocommerce on github